使DIV块流入自由空间

Question

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

有了这个设置，我开始对它进行编码，但是我遇到了一个问题：当一个块扩展时，无论我设置了哪个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