javascript - 使用 javascript 模数更新瓷砖位置的行

Question

我想创建一个position:absolute由每行 5 个图块组成的图块网格，因为我不确定将存在多少个图块我想创建一些循环通过图块并动态添加顶部和左侧位置的 javascript ：

第一行：顶部：0；left:0 然后 51px 然后 102px ...第二行：top:51px; 左：0 然后 51px 然后 102px .. 第三行 ...

我知道我需要在循环中使用模数，但我真的只熟悉选择像 i%4 == 0 这样的 1 项，而不是实际影响整行？

谁能解释我如何做到这一点？

JS

var list = $('ul').children();

for ( var i = 0; i < list.length; i++ ) {

    console.log(i);
    console.log( list[i] );    

    // first 5 top: 0 left: 0,51,102,153,204
    // second 5 top:51 left: 0,51,102,153,204
    // third 5 top: 102 left: 0,51,102,153,204
    $( list[i] ).css({
        left: i*51        
    });   


}

在这里小提琴：http: //jsfiddle.net/Z7TwF/4/

Answer 1

利用

left: (i % 5) * 51
top: Math.floor(i / 5) * 51

这将得到除以 5 的余数，并将其与 51 相乘。顶部的值需要被截断，Javascript 没有用于欧几里得除法的运算符。

Answer 2

var list = $('ul').children();

for ( var i = 0; i < list.length; i++ ) {
    $( list[i] ).css({
        top: (parseInt(i / 5) * 51) + "px",
        left: ((i % 5) * 51) + "px"        
    });   
}