masonry - 砌体布局清理问题

Question

我正在使用 Masonry - 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