Я использую masonry + bootstrap и замечаю, что когда у меня есть решетка из 3 столбцов, у меня есть 10 элементов, она будет отображать сетку 3x4 с двумя пустыми местами внизу. Как я могу автоматически добавить 2 пустых divs внизу, чтобы заполнить его и не иметь эти пробелы? Итак, общий div станет 12, в котором 2 divs просто пусты?
Это не должно быть привязано к 3-столбцу, но должно динамически добавлять пустые divs каждый раз, когда обнаруживается, что существует N количество пустых div, которые могут быть заполнены. Должен быть применим при загрузке и изменении размера.
Не будет проблем с размером .item
, так как все они будут иметь одинаковую ширину и высоту (box/square type)
Я создал 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();
});