我正在使用masonry + bootstrap,注意到当我有一个三列网格,然后有10个项目时,它会显示一个3×4的网格,底部有2个空白空间。 我如何自动添加2个空的div在底部来填充它,而不是那些空白空间? 因此,总共的div将变为12个,在其中2个div只是空的?
这不应该固定为3列,而是应该在检测到可以填充N个空div时动态添加空div。 应适用于加载和调整大小。
由于它们都具有相同的宽度和高度(框/正方形类型),所以.item
的大小不会有问题。
我制作了jsFiddle,可以在最后一行的空白处添加填充物。 这也通过使用layoutComplete
事件在调整大小时工作。 但是问题是,每次调整大小时,它都会添加新的填充物。
尝试调整到不同的大小,您会注意到它不断添加填充物。
此外,以下是代码。
HTML
<input type="hidden" name="hfTotalGridItems" id="hfTotalGridItems" value="10" />
<div class="grid">
<div class="item">
<div>lorem</div>
</div>
<div class="item">
<div>lorem</div>
</div>
<div class="item">
<div>lorem</div>
</div>
<div class="item">
<div>lorem</div>
</div>
<div class="item">
<div>lorem</div>
</div>
<div class="item">
<div>lorem</div>
</div>
<div class="item">
<div>lorem</div>
</div>
<div class="item">
<div>lorem</div>
</div>
<div class="item">
<div>lorem</div>
</div>
<div class="item">
<div>lorem</div>
</div>
</div>
<div class="result"></div>
CSS
.grid {
margin: 0 auto;
}
.item {
margin-bottom: 20px;
border: 1px solid red;
height: 80px;
width: 80px;
}
.filler {
background-color: #999;
border: 1px solid blue;
}
JQuery
$(function () {
function calculateRows() {
var lisInRow = 0;
var $item = $('.grid .item');
var $grid = $('.grid');
var itemWidth = $('.grid .item').width();
var itemHeight = $('.grid .item').height();
$item.each(function () {
if ($(this).prev().length > 0) {
if ($(this).position().top != $(this).prev().position().top) return false;
lisInRow++;
} else {
lisInRow++;
}
});
var lisInLastRow = $item.length % lisInRow;
if (lisInLastRow == 0) lisInLastRow = lisInRow;
$('.result').html('No: of lis in a row = ' + lisInRow + '<br>' + 'No: of lis in last row = ' + lisInLastRow);
if (lisInLastRow < lisInRow) {
var $clonedItem = $('.grid .item:last-child').clone().empty().css({
width: itemWidth,
height: itemHeight
}).addClass('filler');
$grid.append($clonedItem).masonry('appended', $clonedItem);
} else {
if (newTotal > $('#hfTotalGridItems').val()) {
$grid.masonry('remove', $('.grid .item.filler'));
$grid.masonry();
}
}
}
var $grid = $('.grid');
$grid.masonry({
itemSelector: '.item',
isFitWidth: true,
gutter: 20
});
$grid.masonry('on', 'layoutComplete', function (event) {
calculateRows(event.length);
});
$grid.masonry();
});