jquery - jQuery Masonry：对图像进行排序

Question

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

这就是我得到的：

这就是我想要的：

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

到目前为止的代码：

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/

Answer 1

典型问题，典型解决方案。如果您共享您的开发 jsfiddle、jsbin 或在线沙箱，调试会更容易。

更新您只是忘记指定高度。砌体需要宽度和高度。请参阅更改的小提琴。如果您打算动态加载图像，则需要使用imagesLoaded 方法，该方法在图像加载后触发 Masonry ，并且插件知道它们的宽度和高度以正确布局。