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

【问题标题】：Masonry.js issue on wordpress live site, but not local dev sitewordpress 实时站点上的 Masonry.js 问题，但不是本地开发站点
【发布时间】：2014-06-11 21:57:45
【问题描述】：

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

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

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

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

想法？

【问题讨论】：

标签： javascript jquery wordpress jquery-masonry masonry

【解决方案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();
    });

});

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

史蒂夫也试试

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

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

希望对你有帮助

【讨论】：

【解决方案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，然后在实时服务器上加载图像（由于网速），而在本地同时加载两者

【讨论】：