Le plugin jQuery Packery ne règle pas la hauteur correctement

Question

J'utilise le plugin Packery pour donner à ma galerie d'images une mise en page plus intéressante sur un site que je suis en train de construire.

De temps en temps, je visite la page et quelques-unes des images se chevauchent les uns les autres comme ceci:

Mais quand j'actualisez la page, il affiche correctement:

J'ai essayé de spécifier une hauteur sur l'élément de conteneur mais en vain.

Voici le code que je utilise:

CSS:

.packery-grid { 
    min-height: 500px; 
} 

.packery-grid-03 { 
    width: 20%; 
} 

.packery-grid-06 { 
    width: 40%; 
} 

.packery-grid figure { 
    padding: 15px; 
} 

jQuery:

$(document).ready(function() { 

    // visuals 
    $('.packery-grid').packery({ 
     // options 
     itemSelector: '.packery-grid-item', 
     gutter: 0 
    }); 

}); 

HTML:

 <div class="row"> 

      <div class="packery-grid"> 

       <div class="packery-grid-item packery-grid-03"> 
        <figure> 
        <a href="#" data-toggle="modal" data-target="#modal-visual"> 
        <img src="http://somesite.com/wp-content/uploads/2016/11/255-198x127.jpg" alt="Six" /> 
        </a> 
        </figure> 
       </div> 

       <div class="packery-grid-item packery-grid-03"> 
        <figure> 
        <a href="#" data-toggle="modal" data-target="#modal-visual"> 
        <img src="http://somesite.com/wp-content/uploads/2016/11/319-198x127.jpg" alt="Five" /> 
        </a> 
        </figure> 
       </div> 

       <div class="packery-grid-item packery-grid-03"> 
        <figure> 
        <a href="#" data-toggle="modal" data-target="#modal-visual"> 
        <img src="http://somesite.com/wp-content/uploads/2016/11/IMG_8204-198x127.jpg" alt="Four" /> 
        </a> 
        </figure> 
       </div> 

       <div class="packery-grid-item packery-grid-06"> 
        <figure> 
        <a href="#" data-toggle="modal" data-target="#modal-visual"> 
        <img src="http://somesite.com/wp-content/uploads/2016/11/157-426x284.jpg" alt="Three" /> 
        </a> 
        </figure> 
       </div> 

       <div class="packery-grid-item packery-grid-06"> 
        <figure> 
        <a href="#" data-toggle="modal" data-target="#modal-visual"> 
        <img src="http://somesite.com/wp-content/uploads/2016/11/IMG_4445-426x284.jpg" alt="Two" /> 
        </a> 
        </figure> 
       </div> 

       <div class="packery-grid-item packery-grid-03"> 
        <figure> 
        <a href="#" data-toggle="modal" data-target="#modal-visual"> 
        <img src="http://somesite.com/wp-content/uploads/2016/11/Iceland-198x127.jpg" alt="One" /> 
        </a> 
        </figure> 
       </div> 

      </div> 

     </div> 

    </div> 
</div> 

Answer 1

Je pense que je « Ai trouvé la solution sur leur page de support

images Déchargées peuvent se débarrasser de mises en page Packery et provoquer des éléments de l'élément à se chevaucher. imagesLoaded résout ce problème.

et je l'ai donc modifié mon code comme ceci:

// visuals 
var $grid = $('.packery-grid').packery({ 
    // options 
    itemSelector: '.packery-grid-item', 
    gutter: 0 
}); 

    // layout Packery after each image loads 
    // to prevent overlapping images 
    $grid.imagesLoaded().progress(function() { 
     $grid.packery(); 
    });