jQuery Masonry：排序图像

Question

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

这就是我得到的：

这就是我想要的：

这是我应该用jQuery修复的东西，还是以某种方式改变它们从PHP服务器加载的顺序？怎么样？

到目前为止

代码：

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

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

});

图像的CSS

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

ADDED

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

Answer 1

典型问题，典型解决方案here。如果你要分享你的开发jsfiddle，jsbin或在线沙盒，那么调试会更容易。

更新您只是忘了指定高度。砌体需要宽度和高度。见changed fiddle。如果您打算动态加载图片，则需要在图片加载后使用imagesLoaded method触发Masonry ，插件知道其宽度和高度正确布局。