我让它工作,但由于某种原因它停止工作,我不知道我做了什么。盒子 div
向左浮动,我只是不知道我在哪里'出了问题。
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 将使用第一个项目元素的宽度。 (Docs)。
看看这个 JSFiddle 。 http://jsfiddle.net/s8PhS/14/
如果您在 JSFiddle 中调整 HTML 容器的大小,它也会动态调整大小。
我还添加了一些额外的<div>
用于演示目的的元素和 Odd Five element
具有不同的高度,您可以看到砌体插件启动并完美地定位元素。
所以基本上,删除属性 columnWidth: 250
并让 Masonry 动态地拾取它。
在 JSFiddle ,这似乎可以解决您的问题。
<小时/> 提示:我最近使用了同一个 jquery.masonry 插件,但也想对我的元素进行排序,我发现了这个令人惊叹的插件,名为 Isotope这是令人惊奇的并且更加可定制。关于jQuery Masonry 不工作。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12088733/