我正在使用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/

10-12 12:31
查看更多