jQuery Masonry无法正常工作。

我已经工作了，但是由于某种原因它刚刚停止工作，我不知道自己做了什么。divs框向左 float ，我只是不知道我哪里出了错。

jQuery

var $container = $('.work');
$container.imagesLoaded(function(){
   $container.masonry({
      itemSelector: '.box',
      isAnimated: true,
      columnWidth: 250
   });
});

HTML

<div id="part-one" class="work">
   <div class="box col2"><img src="_assets/images/one.jpg" alt="" /></a></div>
   <div class="box col2"><img src="_assets/images/two.jpg" alt="" /></a></div>
   <div class="box col2"><img src="_assets/images/three.jpg" alt="" /></a></div>
   <div class="box col2"><img src="_assets/images/four.jpg" alt="" /></a></div>
   <div class="box col2"><img src="_assets/images/five.jpg" alt="" /></a></div>
</div>

CSS

.work {
   margin-left:98px;
   top:0;
   max-width:1600px;
   padding-bottom:100px;
   position:absolute;
}

最佳答案

删除columnWidth属性，Masonry将使用第一个item元素的宽度。 (Docs)。

checkout 此JSFiddle。 http://jsfiddle.net/s8PhS/14/

如果您在JSFiddle中调整HTML容器的大小，它将也动态地调整大小。
我还添加了一些额外的<div>元素用于演示，并添加了一个具有不同高度的Odd Five element，您可以看到砌砖插件插入并完美定位了元素。

因此，基本上，删除属性columnWidth: 250并让Masonry动态地将其拾取。

在JSFiddle中，这似乎可以解决您的问题。

只是一个提示:最近我使用了相同的jquery.masonry插件，但也想对我的元素进行排序，所以我发现了一个名为Isotope的令人惊叹的插件，它令人惊叹并且可自定义得多。

Check out the Demo on the Homepage!

关于jQuery Masonry无法正常工作。，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12088733/