2

我在我正在研究的 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 非常糟糕，我让它工作起来有点困难。

谁能帮我将它合并到我已经在使用的代码中并且有效（上面的那个）？

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

4

1 回答 1

3

我认为这应该对你有用；

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

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

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

编辑

也就是说，我只在通过 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);
于 2012-07-07T14:18:18.137 回答