我正在使用 masonry + bootstrap 并注意到当我有一个 3 列网格时我有 10 个元素,它会显示一个底部有 2 个空格的 3x4 网格。我怎么能在底部自动添加 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();
});
最佳答案
你需要检查两件事
(originalBoxs % lisInRow === 0)
。如果框数大于允许的最大框数。您可以计算最大允许框如下所示
var totalAllowed = lisInRow;
while (totalAllowed < originalBoxs) {
totalAllowed += lisInRow;
}
如果这是真的,那么您应该删除所有多余的框。否则添加填充框。这是更新的 jsFiddle
我在下面添加了更新的 jQuery 代码
$(function () {
// remember the original box lenth.
var $item = $('.grid .item');
var originalBoxs = $item.length;
function calculateRows() {
var lisInRow = 0;
var $item = $('.grid .item');
var $grid = $('.grid');
var itemWidth = $('.grid .item').width();
var itemHeight = $('.grid .item').height();
// calculate how many boxes are in the first row.
$item.each(function () {
if ($(this).prev().length > 0) {
if ($(this).position().top != $(this).prev().position().top) return false;
lisInRow++;
} else {
lisInRow++;
}
});
// calculate how many boxes are in the last row.
var lisInLastRow = $item.length % lisInRow;
$('.result').html('No: of lis in a row = ' + lisInRow + '<br>' + 'No: of lis in last row = ' + lisInLastRow);
// the total allowed boxes on the page.
var totalAllowed = lisInRow;
while (totalAllowed < originalBoxs) {
totalAllowed += lisInRow;
}
if (($item.length > originalBoxs && originalBoxs % lisInRow === 0) || ($item.length > totalAllowed)) {
// if the number of original boxes evenly divides into the number of boxes in a row.
// or the number of boxes on the page is past the max allowed.
// remove any filler boxes.
var boxesToDelete = $('.grid .item.filler');
var deleteBoxes = $item.length - totalAllowed;
for (var i = 0; i < deleteBoxes; i++) {
// delete unnesecary boxes.
$grid.masonry('remove', boxesToDelete[boxesToDelete.length - i - 1]);
}
} else if (lisInLastRow !== 0) {
// if the last row does not equal 0 and the number of boxes is less then the original + the first row
// then fill it in with new boxes.
var $clonedItem = $('.grid .item:last-child').clone().empty().css({
width: itemWidth,
height: itemHeight
}).addClass('filler');
$grid.append($clonedItem).masonry('appended', $clonedItem);
}
}
var $grid = $('.grid');
$grid.masonry({
itemSelector: '.item',
isFitWidth: true,
gutter: 20
});
$grid.masonry('on', 'layoutComplete', function (event) {
calculateRows(event.length);
});
$grid.masonry();
});
联系客服