两种尺寸的网格中的jQuery平铺放置

这个问题很难问。。。我希望我问得对。我已经为这件事绞尽脑汁太久了。我正在尝试做出一个反应灵敏的瓷砖设计。瓷砖可能有两种高度尺寸中的一种；特色和非特色。我希望能够将它们放在列中，为此，我们只需在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>

这将为每个元素提供适当的列和行计数。但这并不能解释为什么特色卡更大。我需要能够移动一个瓷砖到下一列，如果空间是由一个特色瓷砖底部占用

我希望这些瓷砖的放置方式如下：

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

你可以看到一个我正在做的例子，我正在做这个直播，所以它可能会改变，但我会回到这个当我完成。正如您在该页面中所看到的，我只是在它自己的列中制作每个第n个磁贴。我的问题是；当我在一个列中有几个特色牌时，它会将更多相关的牌推到比不太相关的牌低的位置

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

请提出任何问题

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

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