jQuery Masonry不起作用。

Question

我曾经让它工作了，但出于某种原因，它突然停止工作了，而我不知道我做错了什么。Box 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;
}

- green_arrow

---

请提供一个完全不可用的示例，可以吗？ - Asken

只是猜测，如果您删除imagesLoaded()并在文档加载时执行masonry()部分，它是否有效？ - Zathrus Writer

不，它没有，它肯定已经拉取了脚本，我用firebug检查过了，我完全不知道原因！我会尝试获取一个jsfiddle。 - green_arrow

这是一个快速的代码片段 - http://jsfiddle.net/s8PhS/ - green_arrow

Answer 1

去掉你的columnWidth属性，Masonry将使用第一个项目元素的宽度。(文档)。

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

如果在JSFiddle中调整HTML容器大小，它也会动态调整大小。
我还添加了一些额外的<div>元素作为演示目的和一个高度不同的Odd Five element，你可以看到masonry插件完美地定位了这些元素。

所以基本上，删除columnWidth：250属性，让Masonry动态选择它。

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

---

小提示：最近我也使用了这个jquery.masonry插件，但是我还想对我的元素进行排序，我发现了一个很棒的插件叫做Isotope，它非常棒，而且可定制性更强。

在主页上查看演示！

- Anil

Answer 2

看起来与砖柱宽度属性和可用于显示div的空间有关。试着在你的jsfiddle上尝试一下，思考一下这个问题。祝好运。

- BendaThierry.com