jQuery，CSS，带有砖石结构的图像网格布局

Question

我正在使用Masonry插件，但我正在尝试完成多列布局（可能是3列），并且有1列具有较大的图像，另2列具有较小的图像，类似于顶部的instagrams网格布局中的一个。

我可以将图像裁剪为正方形，但是我不确定如何具有1个大图像和4个较小的图像（每列2个图像），并且图像的大小应取决于父div的宽度。 石工有这样的选择吗？ 还是与CSS有关，还是可以与Masonry结合使用的另一个jQuery插件？

Answer 1

您可以使用基于百分比的宽度，并且只要您适当地调整div的大小，其余的都由石工来完成。 重要的是将columnWidth设置为较小的div之一的CSS选择器。 参见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'
});