javascript - wordpress 实时站点上的 Masonry.js 问题，但不是本地开发站点

Question

我在这个网站上工作：http: //lisarevson.com/

它使用带有 Masonry.js 的 wordpress 主题。

我下载了该站点并克隆了数据库，该站点在 MAMP Pro 上本地看起来不错。

然而在现场，如您所见，砖石瓦片从底部向上滑动并相互重叠。我有点不知所措，为什么它会在现场发生而不是在本地发生，因此如何解决。

想法？

Answer 1

谢谢。每个人都在正确的轨道上我找到了答案： imagesLoaded。

jQuery(document).ready(function($){
    // initialize Masonry
    var $container = $('#content-blog').masonry();
    // layout Masonry again after all images have loaded
    $container.imagesLoaded( function() {
      $container.masonry();
    });

});

Answer 2

我看到你把你的 js 函数放在 header 上：

<script type="text/javascript">
jQuery(document).ready(function($){
$("#wrapper").vids();
});
jQuery(document).ready(function($){
$('#content-blog').masonry({columnWidth:323});
});
</script>

我认为您应该在调用 mansory.js 后将其移至页脚。

Answer 3

尝试在 window.load 上调用砌体

<script type="text/javascript">
jQuery(document).ready(function($){
$("#wrapper").vids();
});
jQuery(window).load(function($){
$('#content-blog').masonry({columnWidth:323});
});
</script>

实际上发生的事情是首先执行砌体，然后在实时服务器上加载图像（由于网速），而在本地同时加载

Answer 4

史蒂夫也试试

var $container = $('#content-blog');
// initialize
$container.masonry({
columnWidth: 323,
itemSelector: '.post'
});

正如 Le 所说，将您的脚本从顶部移动到底部并将其放在 masonry.min.js 之后

希望这可以帮助