1

この質問をするのは非常に難しいでしょう...私はこれを正しく尋ねたいと思います. 私はあまりにも長い間、これに頭を悩ませてきました。レスポンシブ タイル デザインを作成しようとしています。タイルの高さは 2 つのサイズのいずれかです。特集と非特集。それらを列に配置できるようにしたいと思います（そして、この目的のために、3列で言いましょう）ロード後のhtmlは次のとおりです。

<div class="container">
    <div class="card featured">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card featured">...</div>
    <div class="card">...</div>
    <div class="card featured">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card featured">...</div>
    <div class="card">...</div>
</div>

注目のタイルは、非注目のカードの高さの 2 倍です。これらのカードを配置するために jQuery を使用しています。私が使用していた最後のコードは、これらのタイルをすべて適切な行と列に配置しますが、これらの注目のカードは考慮されていません。これは、今日ここから取得したコードです。

var columns = 3;

$('.card').each(function(i){
    var row = Math.floor(i / columns);
    var col = i % columns;
    $(this).addClass('col' + col + ' row' + row);
});

これにより、各要素に適切な列と行の数が与えられます。しかし、注目のカードが大きくなることは説明できません。注目のタイルの下部がスペースを占有している場合、タイルを次の列に移動できる必要があります。

これらのタイルを次のように配置したいと思います。

 __   __   __
|1 | |2_| |3_|
|  |  __   __
|__| |4 | |5_|
 __  |  |  __
|6 | |__| |7_|
|  |  __   __
|__| |8_| |9 |
 __   __  |  |
|10| |11| |__|

ここで私が行っていることの例を見ることができます(私はこのライブで作業しているので、変更される可能性がありますが、終了したらこれに戻ります)。そのページでわかるように、私は n 番目ごとのタイルを独自の列に作成しています。私の問題は; 1 つの列に注目のタイルがいくつかあると、関連性の高いカードが関連性の低いカードよりも低くなります。

div のリストから始めて、コードをリファクタリングする必要があります。

ご不明な点がございましたら、お問い合わせください。

更新解決済み - 知りたいかどうか尋ねてください。答えは広範囲です

4

0 に答える 0