0

我目前正在尝试制作具有 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;）都粘在屏幕顶部。

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

我试过索引每个元素，我不想给任何东西添加类。您可以在此处查看示例，但目前没有任何效果。

我在代码中添加了这个：

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

1 回答 1

1

试试这个：-

Use$.each的函数参数第一个是索引，第二个是元素本身（或 this）。

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

    }); 
}
于 2013-05-12T18:12:29.420 回答