我正在使用Masonry插件,但是我正在尝试完成多列布局(可能是3列),并且有1列具有较大的图像,另2列具有较小的图像,类似于此instagrams网格中的一个顶部的布局。
我可以将图像裁剪为正方形,但是不确定如何具有1个大图像和4个较小的图像(每列2个图像),并且图像的大小应取决于父div的宽度。石工有这样的选择吗?还是与CSS有关,还是可以与Masonry结合使用的另一个jQuery插件?
最佳答案
您可以使用基于百分比的宽度,并且只要您适当地调整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'
});
关于jquery - jQuery,CSS,带有砌体的图像网格布局,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18167824/