我使用的是Mashise插件，但我正在尝试实现多列布局（可能有3列），其中1列具有大图像，另外2列具有较小图像，类似于顶部instagrams网格布局中的一列。
我可以将我的图像裁剪为正方形，但我不确定如何拥有1张大图像和4张小图像（每列2张图像），图像应该能够根据父div宽度调整大小。砌体有这样的选择吗？或者这与CSS有关，或者有另一个jQuery插件可以与Masonry相结合？
您可以使用基于百分比的宽度，并且只要您正确地调整div的大小，其他部分就应该由砌体来处理。重要的是将columnWidth作为CSS选择器设置为较小的div之一。看见http://jsfiddle.net/7Xp4T/
HTML:
<div id="container">
<div class="square bigsquare"></div>
<div class="square littlesquare"></div>
<div class="square littlesquare"></div>
<div class="square littlesquare"></div>
<div class="square littlesquare"></div>
</div>
CSS:
#container {
width: 400px;
height: 150px;
}
.square {
border: 1px solid black;
}
.bigsquare {
width: 40%;
height: 100%;
background: red;
}
.littlesquare {
width: 20%;
height: 50%;
background: blue;
}
JavaScript:
var $container = $('#container');
// initialize
$container.masonry({
columnWidth: '.littlesquare',
itemSelector: '.square'
});
