具有垂直堆栈的动态网格布局

Dynamic Grid Layout with Vertical Stacks

本文关键字：动态 网格 布局 堆栈 垂直      更新时间：2023-09-26

我知道有各种jquery插件可以创建动态网格布局，但我似乎无法利用它们中的任何一个来创建自动排序的网格，在继续下一个之前填充一个单列

我希望实现的目标（块编号）：

_____________
|_1_| 3 |_5_|
| 2 |___|_6_|
|___|_4_|_7_|

编辑添加细节：我希望垂直堆叠填充，而不是水平堆叠内容。在上面的例子中，大多数系统都会把2放在我放3的地方。

编辑2：由数字表示的每个块都可以有不同的高度（基于内容），我希望它为每个数字分配一列，使整个列的高度与其他列大致相等（或尽可能接近）

我相信同位素可以使用fitColumn和cellsByColumn布局模式来做到这一点。

请参阅演示：http://isotope.metafizzy.co/demos/layout-modes.html

Bootstrap的CSS网格系统可以做到这一点：

<div class="row">
    <div class="col-md-4">
        <p>1</p>
        <p>2</p>
    </div>
    <div class="col-md-4">
        <p>3</p>
        <p>4</p>
    </div>
    <div class="col-md-4">
        <p>5</p>
        <p>6</p>
        <p>7</p>
    </div>
</div>

请注意，根据col-md-4s中每个<p>的任意内容长度，"行"可能不会直接对齐。此外，<p>s不是必需的，您可以在其中放置任何您想要的内容。

相关文章：