0

我想让所有这些盒子表现得像浮动一样。但是，它们不能，它们需要绝对定位才能让我与这个定位的数字进行交互。

这是我的尝试：

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() 函数，您将看到我的开始。

谢谢你的帮助！

4

3 回答 3

1

我已经编辑了你的 jsfiddle 来移动项目，就像它们是浮动的一样。它假设您的边距和宽度对于包装器中的每个 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/

于 2013-04-23T13:56:10.147 回答
1

您必须同时跟踪column index和row index：一旦column index * item width超过window width，重置column index和增量row index以模拟下一行。这是这种方法的简单示例：

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

http://jsfiddle.net/N4S4L/1/

于 2013-04-23T13:47:42.027 回答
0

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

于 2013-04-23T13:51:35.530 回答