jQuery Masonry：对图像进行排序答案

【问题标题】：jQuery Masonry: Sorting imagesjQuery Masonry：对图像进行排序
【发布时间】：2012-10-01 17:44:32
【问题描述】：

我正在使用 jQuery Masonry 来对齐我网站上的图像。所有图像具有相同的宽度但不同的高度。根据加载它们的顺序，它们被放置，很奇怪。

这是我得到的：

这就是我想要的：

这是我应该用 jQuery 解决的问题，还是以某种方式改变它们从服务器加载的顺序用 PHP？那怎么办？

到目前为止的代码：

var $container = $('#imageAlbum');

$container.imagesLoaded( function(){
  $container.masonry({
      itemSelector : '.image'
      columnWidth: 230;
  });

});

图片的 CSS

.image{
     margin: 10px;
     float: left;
     width: 230px;
}

添加

做了一个jsFiddle：http://jsfiddle.net/DXCDv/2/

【问题讨论】：

我相信masonry 已经被isotope 取代了。你是如何初始化砌体集的？你能分享一些代码吗？
@KaleMcNaney 它们是 2 个不同的插件，砖石是免费的，但同位素不是。
好电话，@undefined。对于非商业/个人用途，同位素requires a license 是的，它是一个不同的插件。如果您可以共享一些代码，仍然愿意帮助调试砌体问题。并不是要错误地插入同位素。
@KaleMcNaney 你真好，这不是我的问题:)。
您是否有可能在itemSelector : '.image' 之后缺少一个逗号，而在列宽之后缺少一个不必要的分号？

标签： jquery image sorting jquery-masonry

【解决方案1】：

典型问题，典型解决方案here。如果你愿意分享你的开发 jsfiddle、jsbin 或在线沙箱，调试起来会更容易。

更新您只是忘记指定高度。砌体需要宽度和高度。见changed fiddle。如果您打算动态加载图像，则需要使用 imagesLoaded method 触发 Masonry 在图像加载并且插件知道它们的宽度和高度布局合理。

【讨论】：