jQuery Masonry不工作.

Question

我有它的工作,但由于某种原因,它刚刚停止工作,我不知道我做了什么.箱子divs左边漂浮,我只是不知道我哪里出错了.

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

Answer 1

删除你的columnWidth属性,砌体将使用第一个项目元素的宽度.(文件).

看看这个JSFiddle.http://jsfiddle.net/s8PhS/14/

如果在JSFiddle中调整HTML容器的大小,它也会动态调整大小.
我还添加了一些额外的<div>元素用于演示目的和一个Odd Five element不同的高度,你可以看到砌体插件开始并完美地定位元素.

所以基本上,删除属性columnWidth: 250,让Masonry动态地选择它.

在JSFiddle中,这似乎可以解决您的问题.

只是一个提示:我最近使用了同样的jquery.masonry插件,但也想对我的元素进行排序,我发现了这个名为Isotope的惊人插件,这个插件非常棒且更具可定制性.

查看主页上的演示!