Плагин jQuery Packery не устанавливает высоту должным образом

Question

Я использую плагин Packery, чтобы дать моей галерее изображений более интересный макет на веб-сайте, который я создаю.

Каждый сейчас и потом, когда я посещаю эту страницу и некоторые изображения накладываются друг на друга, как:

Но тогда, когда я обновить страницу, он отображает его правильно:

Я попытался указать высоту на элемент контейнера, но безрезультатно.

Вот код, я использую:

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

Я думаю, что я «В нашли решение на их странице поддержки

выгружены изображения могут скинуть макеты Packery и вызвать пункт элементов перекрываться. imagesLoaded устраняет эту проблему.

И поэтому я изменил свой код следующим образом:

// 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(); 
    });