jQuery砌体Wordpress和图像Loaded

我正在使用jQuery砌体上的WordPress主题我正在努力。用得到它的工作了一段时间后，挣扎，我发现这个：jQuery砌体Wordpress和图像Loaded

 <script type="text/javascript"> 
     jQuery(function() { 
      jQuery('#masonry-wrap').masonry({ 
      itemSelector: '.masonry-box', 
      columnWidth: 283 
      }); 
     }) 
     </script>

似乎是工作的罚款，我......不过检查Chrome和Safari的网站推动包含元素的底部成以下元素...

现在我读了一个地方，可以通过使用imagesLoaded插件和我在这里找到的代码来解决这个问题：http://masonry.desandro.com/demos/images.html - 但是因为我对jQuery非常糟糕，所以我遇到了一些困难让它工作。

任何人都可以帮助我将它合并到我已经使用的代码，并且工作（上面的那个）？

任何帮助将不胜感激！朱利安

来源

2012-07-07 deborre

我认为这应该适合你;

// Masonry Trigger 
var $container = jQuery('#masonry-wrap'); 

$container.imagesLoaded(function(){ 
    $container.masonry({ 
    itemSelector: '.masonry-box', 
    columnWidth: 283 
    }); 
})

记住要使用最新版本的imagesLoaded的，我有一个问题，而回，原因是我的版本是略显过时。

编辑

这么说，我只用imagesLoaded当我通过AJAX新的内容已经加载和现在用的重新布局方法。如果您在加载图像后在$ window.load（）上运行砌体，它应该也可以正常运行。

(function($){ 

    $(window).load(function() { 

     // Masonry Trigger 
     var $container = $('#masonry-wrap'); 

     $container.masonry({ 
     // options 
     itemSelector: '.masonry-box', 
     columnWidth: 283 
     }); 

    }); 

})(jQuery);

来源

2012-07-07 14:18:18 McNab

嘿，谢谢你的回复！所以我必须单独加载imagesLoaded脚本？在砌体页面上，它说：“[...]包含的图像加载插件使这很容易。”所以我认为它已经被纳入石工了？也出于某种原因，代码只适用于我在函数前面的jQuery位（就像我目前使用的位），所以我想知道是否可以将它放在您粘贴的代码前面？ - 我迄今尝试的任何方式都不成功......再次欢呼。 – deborre 2012-07-07 14:25:43

嘿，好的一点 - 当我看到'收录'时，我认为他的意思是在git .zip下载包中，但是你是对的 - 它被整合到了Masonry插件脚本中。我的错！准备downvoting :-) – McNab 2012-07-07 14:30:39

嘿，我编辑了答案 - 尝试在window.load（）上运行它。这可能是你在Chrome中遇到的问题，Safari与加载图像无关，你有链接看看发生了什么？ – McNab 2012-07-07 14:43:29

jQuery砌体Wordpress和图像Loaded

回答

相关问题