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

これを試して：-

$.eachの関数引数を使用します。最初の引数はインデックスで、2 番目の引数は要素自体 (または 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 に答える