砌體佈局結算問題

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

啊哈！ imagesLoaded似乎是答案，全部細節在這裏：http://masonry.desandro.com/appendix.html#imagesloaded