Question

这个问题很难问......我希望我这么问。我已经把这个问题包围了很长时间了。我正在尝试制作响应式瓷砖设计。瓷砖可以具有两种尺寸中的一种;特色而非特色。我希望能够将它们放在列中（为了这个目的，我们只能说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| |__|

你可以看到我正在做的事情的一个例子Here（我正在进行现场工作，所以它可能会改变，但是当我完成时我将恢复到这个状态）。正如您在该页面中看到的那样，我只是在其自己的列中创建每个第n个tile。我的问题是;当我在一列中有几个特色瓷砖时，它会推动比相关性较低的卡片更低的相关卡片。

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

请提出任何问题。

更新已解决 - 请询问您是否愿意了解。答案很广泛

jQuery tile放置在两个大小的网格中

0 个答案: