5

我让它工作，但由于某种原因它刚刚停止工作，我不知道我做了什么。盒子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;
}
4

2 回答 2

6

移除您的columnWidth属性，Masonry 将使用第一个项目元素的宽度。（文档）。

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

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

所以基本上，删除该属性columnWidth: 250并让 Masonry 动态拾取它。

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

提示：我最近使用了同样的 jquery.masonry 插件，但也想对我的元素进行排序，我发现了这个名为Isotope的神奇插件，它非常棒，而且更可定制。

查看主页上的演示！

于 2012-08-23T11:11:00.470 回答
0

它似乎与 masonry column width 属性和可用于显示 div 的空间有关。尝试使用您的 jsfiddle 进行思考。祝你好运。

于 2012-08-23T10:40:57.647 回答