如何像在Pinterest中一样在CSS中垂直捕捉div

Question

我有4个div向左浮动，我可以看到2个。

.box {
  width: 50%;
  border: 1px solid red;
  float: left;
  box-sizing: border-box;
}

Divs没有拼凑在一起。我的意思是我不喜欢那个垂直的白色空间： - ）

调查Pinterest我发现他们使用position: absolute和top，left。这很疯狂，我想有些JS负责计算。

这是JS Bin：http://jsbin.com/kurayama/4/edit

是否可以使用更简单的CSS？

Answer 1

您需要使用Javascript来完成您的要求，这是一个受欢迎的库Isotope。

Answer 2

我不知道用css单独做一个简单的方法，但我很确定pinterest使用像isotope这样的脚本。

Answer 3

Isotope很酷，但与Foundation CSS框架存在一些冲突。

然后我找到了Packery。它只是有效。

http://packery.metafizzy.co

Answer 4

Bootstrap 4没有提供card-columns形式的解决方案