Question

我目前正在尝试使用1-4列（取决于屏幕大小）制作响应式网格布局。我使用绝对定位而不是浮动，因为其中一些元素比其他元素高。我想你可以说这有点像pinterest，但是这些列并不是固定宽度，每个盒子的比例为3.5：2或者比例为3.5：4，这意味着每个盒子的高度可能不同。

我已经得到了列，并且盒子大小调整正常工作，我似乎无法弄清楚的下一个问题是能够将每个盒子放在最后一个下面。

我有几个循环，这里是我需要做的工作。

for(i=0; i<= col; i++){
    $('.card:nth-child(' + col + 'n+' + i + ')').each(function(col){ 
        $(this).css({left: (cardW + cardM)*(i-1) + "px"}).html(i);
    });
}

所以，这样做取决于列数，找到每个nth-child并使用left水平放置它们。

这工作得非常好。问题是，所有元素（position:absolute;）都粘在屏幕顶部。

现在，我需要遍历每个那些特定元素，然后添加元素之前的高度。

我已尝试为每个元素编制索引，但我不想将类添加到任何内容中。您可以看到示例 HERE ，但目前没有任何功能。

我在代码中添加了这个：

var index = $(this).length;
console.log(index);

我每次都会获得1，而不是5

当我索引每个循环中的所有元素时，我只得到1作为索引号，我不知道如何找到最后一个元素的高度。

如果没有意义，请评论。

的更新

我已经弄清楚并且算了数学。由于学习了如何使用下面答案中的索引号，这里是代码的补充。

for(i=0; i<= col; i++){
    var nthCard = $('.card:nth-child(' + col + 'n+' + i + ')')
    nthCard.each(function(idx){
        nthCard.css({left: (cardW + cardM)*(i-1) + "px"});  

        if(idx > 0){
            var prevC = nthCard.eq(idx-1);
            var prevT = parseInt(prevC.css("top").replace("px", ""));
            var prevH = parseInt(prevC.css("height").replace("px", ""));
            var prevM = parseInt(prevC.css("margin-top").replace("px", ""));
            console.log(prevT + " " + prevH + " " + prevM + " = " + (prevT + prevH + prevM));
            nthCard.eq(idx).css({top: (prevT + prevH + prevM) + "px"});
        }
    }); 
}

Answer 1

试试这个： -

使用$.each的函数参数第一个是索引，第二个是元素本身（或者这个）。

    for(i=0; i<= col; i++){
    $('.card:nth-child(' + col + 'n+' + i + ')').each(function(idx){
        //... SOme code
                    console.log(idx)
                    //..somecode

    }); 
}

jQuery绝对定位取决于.each（）循环中的最后一个元素

的更新

1 个答案: