Question

它在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

史蒂夫也试着

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

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

希望这有帮助

Answer 4

尝试在window.load上调用masonry

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

实际上会发生什么是先执行masonary然后在实时服务器上加载图像（由于网速），而在本地同时加载

Masonry.js在wordpress live site上发布，但不是本地开发站点

4 个答案: