javascript - 绝对位置元素，因此它们的行为就像它们是 float 的

Question

我想让所有这些框都像 float 一样。然而，它们不可能，它们需要绝对定位才能让我与这个定位的数字进行交互。

这是我的尝试:

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

我只是想不出如何将它们包裹起来以适应，以及如何在调整窗口大小时重新定位。

这是一个演示。 http://jsfiddle.net/Fgcqs/3/ .如果您取消注释 absPos() 函数，您将看到我的开头。

感谢您的帮助!

Answer 1

我已经编辑了你的 jsfiddle 来移动元素，就像它们是 float 的一样。它假设包装器中每个 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();

http://jsfiddle.net/Fgcqs/12/