Question

我在网格中使用浮动div，我想填写最后一行，因此它始终具有=数字。该函数应该适用于每行中的任意数量的项目（因为这可能会有所不同）。我接受了工作，接受它只产生一个填充物，而不是两个（如下面的例子所示）！

HTML：

<ul>
 <!-- first row -->
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
<!-- second row -->
 <li>Item 4</li>
 <li>Item 5</li>
 <li>Item 6</li>
<!-- third row -->
 <li>Item 7</li>
</ul>

的CSS：

li.gallery-item { width: 33.3334%; float: left;}

JS：

function rowFillers() {
        var $galItem = jQuery('.gallery-item'), 
            $rowFiller = jQuery('<div class="row-filler">TEST</div>')
            $lisInRow = 0;

        //Calculate number of gallery-items on each row
        $galItem.each(function() {
            $this = jQuery(this);
            if($this.prev().length > 0) {
                if($this.position().top != $this.prev().position().top) return false;
                $lisInRow++;
            } else {
                $lisInRow++;
            }   

        });

        //Calculate number in last row
        var $lisInLastRow = $galItem.length % $lisInRow;
        if($lisInLastRow == 0) $lisInLastRow = $lisInRow;

        //If last row isn't full, add fillers
        if ( $lisInLastRow != $lisInRow) {

            function addRowFiller() {
                    $galItem.last().after($rowFiller);
            }


            $fillerI = $lisInRow - $lisInLastRow;

            for (var i = 0; i < $fillerI; i++) {
                            addRowFiller();
            }
        }
    }

    rowFillers();

这是一个小提琴：https://jsfiddle.net/m8xcpdys/1/

Answer 1

我想出了

 function rowFillers() {
    var $galItem = jQuery('.gallery-item'), 
        $rowFiller = jQuery('<div class="gallery-item">TEST</div>')
        $lisInRow = 0;
        var $items = $(".gallery-item");
        var addc = 3 -( $items.length %3);

        for(var i = 0; i < addc; ++i){

            $items.parent().append($rowFiller.clone())
        }
    }

并添加了课程

div.gallery-item { width: 33.3334%; float: left;}

jQuery：基于变量计数多次运行函数

1 个答案: