html - 使 DIV block 流入自由空间

Question

我一直在尝试为我的投资组合网站制作一个基于 block 的界面，其中每个内联 block 代表我的一件作品，单击时，它会扩展到原来的两倍大小并显示更多信息。

有了那个设置，我开始编写它，但我遇到了一个问题:当一个 block 展开时，它总是在下面的行中留下一个空白，无论我设置了哪个 css 设置(我试过十几个已经)，我真正想要的是用以下元素填充空白区域。

下图更好解释:

这是实际的 HTML:

<div class="block">
    1
</div>
<div class="block">
    2
</div>
<div class="block big">
    3
</div>
<div class="block">
    4
</div>
<div class="block">
    5
</div>
<div class="block">
    6
</div>
<div class="block">
    7
</div>
<div class="block">
    8
</div>

这是 CSS:

.block{
    width: 150px;
    height: 150px;
    border: 1px solid black;
    display: inline-block;
    margin: 5px;
}

.big{
    width: 320px;
    height: 320px;
}

我已经尝试过使用浮点值，但没有成功。

Answer 1

好吧，Masonry js 库似乎能够做到这一点(还附带了一组很好的记录良好的特性和方法)，即使它不使用纯 CSS。

这是链接:http://masonry.desandro.com