jquery - jquery，css，带砖石的图像网格布局

Question

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

我可以将图像裁剪为正方形，但我不确定如何拥有 1 个大图像和 4 个较小的图像（每列 2 个图像），并且图像应该能够根据父 div 宽度调整大小。Masonry有这样的选择吗？或者这与 CSS 有关还是有另一个 jQuery 插件可以与 Masonry 结合使用？

Answer 1

您可以使用基于百分比的宽度，只要您正确调整 div 的大小，Masonry 应该会处理其余的事情。重要的部分是将您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'
});