javascript – Bootstrap Masonry在网格底部有空格时添加空白div

我正在使用砖石引导,并注意到当我有一个3列网格时,我有10个项目,它将显示一个3×4网格在底部有2个空格.如何自动在底部自动添加2个空格来填补它,而不是有空格？那么总div会变成12,其中2个div只是空白？

这不应该被固定为3列,但应该动态地添加空的div,只要它检测到有N个空的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,$clonedItem);    
        }

    }

    var $grid = $('.grid');

    $grid.masonry({
        itemSelector: '.item',function (event) {
        calculateRows(event.length);
    });

    $grid.masonry();
});