Question

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

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

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'
});

jquery，css，图像网格布局与砌体

1 个答案: