使用WordPress和imagesLoaded的jQuery砌体

我在我正在研究的wordpress主题上使用jquery砌体。 在努力让它工作了一段时间之后我发现了这个：

 jQuery(function () { jQuery('#masonry-wrap').masonry({ itemSelector: '.masonry-box', columnWidth: 283 }); })  

似乎对我来说工作正常……但是在Chrome和Safari中检查网站会将包含元素的底部推入以下元素中……

现在我在某处读到，这可以通过使用imagesLoaded插件和我在这里找到的代码来解决： http ：//masonry.desandro.com/demos/images.html – 但是因为我对jQuery非常糟糕，我让它上class有点困难。

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

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

Answer 1

我认为这对你有用;

 // Masonry Trigger var $container = jQuery('#masonry-wrap'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector: '.masonry-box', columnWidth: 283 }); }) 

记得使用最新版本的imagesLoaded，我有一段时间遇到问题，原因是我的版本稍微过时了。

编辑

也就是说，当我通过AJAX加载新内容并使用reLayout方法时，我只使用imagesLoaded。 如果在加载图像后在$ window.load（）上运行砌体，它应该运行正常。

 (function($){ $(window).load(function() { // Masonry Trigger var $container = $('#masonry-wrap'); $container.masonry({ // options itemSelector: '.masonry-box', columnWidth: 283 }); }); })(jQuery);