Question

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

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

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

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

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

Answer 1

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

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

Answer 2

Bootstrap's CSS Grid System可以做到这一点：

<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>

请注意，“行”可能无法直接对齐，具体取决于<p>中每个col-md-4的任意内容长度。此外，<p>不是必需的，你可以在那里放任何你想要的东西。

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

2 个答案: