Javascript 绝对位置元素，使其行为类似于浮动

我想让所有这些盒子都像漂浮的一样。然而，他们不可能，他们需要绝对定位，以便我与这个定位号码互动

以下是我的尝试：

var $item = $('#wrapper div'),
    len = $item.length,
    itemWidth = $item.innerWidth(),
    winWidth = $('#wrapper').innerWidth(),
    cols = Math.floor(winWidth / itemWidth),
    moveX = itemWidth + 10;

function absPos() {
    for (var i = 0; i < len; i += 1) {
        $('.item-' + i).css({
            'position' : 'absolute',
            'left' : moveX * i
        });
    }
}

var$item=$（'#包装器div'），
len=$item.length，
itemWidth=$item.innerWidth（），
winWidth=$（“#包装器”）.innerWidth（），
cols=数学地板（winWidth/itemWidth），
moveX=itemWidth+10；
函数absPos（）{
对于（变量i=0；i

我只是不知道如何包装它们以适应，并且在调整窗口大小时重新定位

这是一个演示。如果您取消命令absPos（）函数，您将看到我的开始

---

谢谢你的帮助

您必须同时跟踪

列索引

和

行索引

：一旦

列索引*项宽度

超过

窗口宽度

，则重置

列索引

并增加

行索引

，以模拟下一行。下面是这种方法的简单示例：

function absPos() {
    var colIndex = 0;
    var rowIndex = 0;
    for (var i = 0; i < len; i += 1) {
        if (moveX * colIndex + itemWidth > winWidth) {
            colIndex = 0;
            rowIndex++;
            top += itemHeight + 10;
        }
        var left = moveX * colIndex; 
        var top = moveY * rowIndex;
        $('.item-' + i).css({
            'position' : 'absolute',
            'left' : left,
            'top' : top
        });
        colIndex++;
    }
}

函数absPos（）{
var-colIndex=0；
var-rowIndex=0；
对于（变量i=0；iwinWidth）{
colIndex=0；
rowIndex++；
顶部+=项目高度+10；
}
var left=moveX*colIndex；
var top=移动*行索引；
$（'.item-'+i）.css({
'位置'：'绝对'，
"左":左,，
“顶部”：顶部
});
colIndex++；
}
}

---

您应该检查您的左值加上项目的宽度是否超过容器的宽度，在这种情况下，请引入一个顶部值并将左值重置为0，以开始创建新行。

我已编辑了您的JSFIDLE，以使项目像浮动一样移动。它假定包装器中每个div的边距和宽度相同，并且如果css发生变化，将自动计算出间距的宽度和高度

var wrapper =  $('#wrapper'),
    items = wrapper.children('div'),
    len = items.length,
    itemWidth = items.innerWidth() + parseInt(items.css('margin-left')) + parseInt(items.css('margin-right')),
    itemHeight = items.innerHeight() + parseInt(items.css('margin-top')) + parseInt(items.css('margin-bottom'));

items.css('float', 'none');


function absPos() {
    var cols = Math.floor(wrapper.width() / itemWidth);
    items.each(function() {

        var left = ($(this).index() % cols) * itemWidth; //the bit in brackets calculates which column the div should be in (the remainder of the current index of your item divided by the number of columns per row), then you times that by item width as worked out above, you use the index as this will allow you to start at left:0

        var height = Math.floor($(this).index() / cols) * itemHeight //the bit in brackets calculates which row the div should be in, then you times that by item height as worked out above, you use the Math.floor as this will allow you to start at top:0.  Should have really called this top!

        $(this).css({
            'position' : 'absolute', 
            'top': height,
            'left': left
        });
    });

    wrapper.height((Math.ceil(len / cols)) * itemHeight);
}

$(window).resize(function() {
    absPos();
});
absPos();

---

绝对传奇！你能解释一下左边和高度变量在做什么吗。谢谢