Question

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

        <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 
   }); 
})

请记住使用最新版本的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);

使用Wordpress和imagesLoaded的jQuery砌体

1 个答案: