jQuery 砌体与 Wordpress 和 imagesLoaded

Question

我正在我正在开发的 WordPress 主题上使用 jquery masonry。在努力让它工作一段时间后，我发现:

        <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 非常糟糕，所以我在让它工作时遇到了一些困难。

任何人都可以帮助我将其合并到我已经使用的并且有效的代码中(上面的代码)吗？

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

Answer 1

我认为这应该适合你；

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

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

记得使用最新版本的imageLoaded，前段时间我遇到了一个问题，原因是我的版本有点过时了。

编辑

也就是说，我仅在通过 AJAX 加载新内容并使用 reLayout 方法时才使用 imagesLoaded。如果在加载图像后在 $window.load() 上运行 masonry，它也应该运行良好。

(function($){

    $(window).load(function() {

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

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

    }); 

})(jQuery);