Кладка макет проблема очистки

Question

Я использую Кладка - в HTML версии

У меня есть DIV:

<div id="container" class="js-masonry" data-masonry-options='{ "itemSelector": ".item"}'> 

в У меня есть около 10:

  <div class="item"> 
       <img src="<?php the_field('image'); ?>" alt="<?php the_title(); ?>"> 
       <p></p> 
       <a style="text-decoration:underline;" class="link-port" href="<?php the_field('link'); ?>" target="_blank"><?php the_title();?></a> 
       <p></p> 
      </div> 

Проблема заключается в том, что, когда сначала загружаются страницы (неэкранированные), первые несколько элементов отображаются нормально, но далее по странице они складываются друг на друга. Они также перекрывают нижний колонтитул. Если вы обновляете браузер (или поворачиваете устройство), все работает отлично, но это, очевидно, не идеально подходит для новых посетителей.

JS был в нижней части страницы, но я переместился на верх, и он все равно сделал то же самое.

Неужели кто-нибудь сталкивался с этим раньше?

Большое спасибо.

Answer 1

Aha! imagesLoaded, кажется, ответ, полная информация здесь: http://masonry.desandro.com/appendix.html#imagesloaded