Question

目前我遇到了以下问题：

我尝试将可变数量的Elements分组到包装器元素中。我的所有元素都是浮动的，宽度可变。如果任何元素到达视口的右侧，则应生成一个新组。

这是我到目前为止所做的：

JS小提琴：

JS（jQuery）

jQuery(document).ready(function($) {

    var sum = 0;
    var max = $('li').length;
    var total = $('ul').innerWidth();
    var openRow = 'open';

    var closeRow = 'close';

    for (var i = 0; i < max; i++) {    
        // First iteration
        if (i == 0) {
            console.log(openRow);
        };

        if (total < sum + $('li').eq(i).innerWidth()) {
            // Reset Counter
            sum = 0;

            // New Row
            console.log(closeRow);
            console.log(openRow);

        };        

        // Inrement Sum - Counter
        sum = $('li').eq(i-1).innerWidth() + sum;

        // Output
        console.log(i+'- Total: '+total+' Sum: '+sum+' Item:'+$('li').eq(i).innerWidth());

        // Last iteration
        if (i == max-1) {
            console.log(closeRow);
        };
    };
});

HTML

<ul>
    <li>Lorem Ipsum dolor (0)</li>
    <li>Lorem Ipsum (1)</li>
    <li>Lorem Ipsum amte magor (2)</li>
    <li>Lorem dolor losabim (3)</li>
    <li>Oxygenium losa (4)</li>
    <li>Lorem Ipsum (5)</li>
    <li>Lorem Ipsum dolor (6)</li>
    <li>Lorem Ipsum sit (7)</li>
    <li>Lorem Ipsum amte magor mal mit längerem Titel (8)</li>
    <li>Lorem dolor losabim (9)</li>
    <li>Oxygenium losa (10)</li>
</ul>

CSS

ul li {padding:30px;background:#eee;outline:1px solid #ccc;float:left}

生成输出

取决于窗口宽度（注意：控制台输出）。

open
    0- Total: 1323 Sum: 205  Item: 217
    1- Total: 1323 Sum: 422  Item: 176
    2- Total: 1323 Sum: 598  Item: 266
    3- Total: 1323 Sum: 864  Item: 229
    4- Total: 1323 Sum: 1093 Item: 197
    5- Total: 1323 Sum: 1290 Item: 176
close
open
    6- Total: 1323 Sum: 176  Item: 217
    7- Total: 1323 Sum: 393  Item: 197
    8- Total: 1323 Sum: 590  Item: 428
    9- Total: 1323 Sum: 1018 Item: 229
   10- Total: 1323 Sum: 1247 Item: 205
close

我想要的是什么：

<!--The count of items per row depending on viewport width-->
<div class="row">
    <li>Lorem Ipsum dolor (0)</li>
    <li>Lorem Ipsum (1)</li>
    <li>Lorem Ipsum amte magor (2)</li>
    <li>Lorem dolor losabim (3)</li>
    <li>Oxygenium losa (4)</li>
</div>
<div class="row">
    <li>Lorem Ipsum (5)</li>
    <li>Lorem Ipsum dolor (6)</li>
    <li>Lorem Ipsum sit (7)</li>
    <li>Lorem Ipsum amte magor mal mit längerem Titel (8)</li>
</div>
<div class="row">
    <li>Lorem dolor losabim (9)</li>
    <li>Oxygenium losa (10)</li>
</div>

Answer 1

你想要获得的不是语义标记，因为LI需要包含在UL中。当然你可以将剩下的所有li放在左边，并添加一个简单的if语句，其中包含：

$("li").each(function(){
if($(this).position().top == 0){
        this.addClass("row-1");
 }else if($(this).position().top > 0 && $(this).position().top <= 200){
    this.addClass("row-2");
 }})

......等等。你的方式似乎过于复杂 - 除非我错过了什么！

jQuery：对可变数量的元素进行分组

JS小提琴：

JS（jQuery）

HTML

生成输出

我想要的是什么：

1 个答案: