Question

1 2 3
4 5 6
7 8 9

我想在js中使用绝对定位和循环来实现上面的盒子位置。但是我坚持开始第二行。

http://jsfiddle.net/k554x7vs/

var left = 0;
for (var i = 1; i <= 10; i++) {

    $('<div class="box" id=box' + i + '></div>').appendTo('#holder');

    if (i == 3) {

        //2nd line and so on..
        left = 0;
        $('#box' + i).css({
            'top': 70
        })



    }


    $('#box' + i).css({
        'left': left
    });

    left += 60;
}

这就是为什么我不能使用左手浮动的原因。

Answer 1

你还需要增加顶部

var left = 0,
    top = 0;
for (var i = 1; i <= 10; i++) {
    $('<div class="box" id=box' + i + '></div>').appendTo('#holder');
    $('#box' + i).css({
        'left': left,
        top: top
    });
    left += 60;
    if (i % 3 == 0) {//need to increment top also need to use the modulus operator since you want to reset/increment after each 3rd element
        left = 0;
        top += 70;
    }
}

演示：Fiddle

Answer 2

解决方案非常简单。有点难以解释我改变了什么，但这有效：

var left = 0;
for (var i = 0; i <= 10; i++) {

    $('<div class="box" id=box' + i + '></div>').appendTo('#holder');

    if (i % 3 == 0) {

        //2nd line and so on..
        left = 0;



    }
        $('#box' + i).css({
            top: (i - i % 3) / 3 * 70
        })


    $('#box' + i).css({
        'left': left
    });

    left += 60;
}

Answer 3

尝试

var arr = [1,2,3,4,5,6,7,8,9]
, n = -1;

$.map(arr, function(val, key) {
    var box = $(".box"),
    height = box.height() + 20,
    width = box.width() + 20,
    len = box.length;
    $("<div>", {
        "class":"box",
        "id":"box" + key,
        "css": {
            "left": key < 3 
                    ? (len * width)
                    : box.eq(++n).css("left"),

            "top": key < 3 
                   ? 0 
                   : key < 6
                     ? height 
                     : (2 * height)
        }
    }).appendTo("#holder")
});

http://jsfiddle.net/k554x7vs/6/

使用绝对位置循环形成9个盒子

3 个答案: