我有它的工作,但由于某种原因,它刚刚停止工作,我不知道我做了什么。框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;
}
答案 0 :(得分:6)
删除columnWidth
属性,而Masonry将使用第一个item元素的宽度。 (Docs)。
查看此JSFiddle。 http://jsfiddle.net/s8PhS/14/
如果在JSFiddle中调整HTML容器的大小,它也会动态调整大小
我还为演示目的添加了一些额外的<div>
元素和一个不同高度的Odd Five element
元素,您可以看到砌体插件启动并完美定位元素。
所以基本上,删除属性columnWidth: 250
并让Masonry动态地拾取它。
在JSFiddle中,这似乎可以解决您的问题。
<小时/> 只是一个提示:我最近使用了同样的jquery.masonry插件,但也想对我的元素进行排序,我发现了这个名为Isotope的惊人插件,这个插件非常棒且更具可定制性。
答案 1 :(得分:0)
它似乎与砌体列宽度属性和可用于显示div的空间有关。试着在你的jsfiddle上玩,想一想。 祝你好运。