1

这个问题很难问……我希望我问对了。我已经在这个问题上纠结了太久了。我正在尝试制作响应式瓷砖设计。瓷砖可以具有两种高度尺寸之一；精选和未精选。我希望能够将它们放在列中（为此，我们只说 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>

特色牌的高度是非特色牌的两倍。我正在使用 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 个图块。我的问题是；当我在一列中有几个特色图块时，它会将更多相关的卡片推低而不是相关性较低的卡片。

我需要重构我的代码，从 div 列表开始。

请提出任何问题。

更新已解决 - 请询问您是否想知道。答案很广泛

4

0 回答 0