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

Looping using position absolute to form 9 boxes

本文关键字：盒子 循环 位置      更新时间：2023-09-26
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;
}

我不使用浮点左是有原因的。

你也需要增加顶部

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;
    }
}

演示：小提琴

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

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;
}

尝试

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/

相关文章：