javascript - 具有不同高度DIV的块状网格

我在互联网上找到了许多有关不同高度图像网格的解决方案，但我试图制作一个具有不同高度的简单div网格。

在这里查看我的JSfiddle：
http://jsfiddle.net/44ffoafu/1/
（我希望块漂浮到空白处）

我已经尝试将以下显示标签之一添加到div上，但是它们不起作用。

display:inline;
display:inline-block;
display:block;
display:table-cell;

我知道像FreeWall和Masonry这样的JavaScript，但是我正在寻找一种更简单的方法以及一种与百分比配合的方法。我正在寻找仅CSS解决方案，但是如果有人遇到小型javascript hack，请也告诉我！

最佳答案

您可以尝试以下一种方法：
仅使用纯CSS：column-count和column-gap。

首先：
像这样更改您的html：

    <div class='wrapper'>
      <div class="block" id="one"></div>
      <div class="block" id="two"></div>
      <div class="block" id="three"></div>
      <div class="block" id="four"></div>
      <div class="block" id="five"></div>
      <div class="block" id="six"></div>
      <div class="block" id="seven"></div>
      <div class="block" id="eight"></div>
      <div class="block" id="nine"></div>
      <div class="block" id="ten"></div>
      <div class="block" id="eleven"></div>
      <div class="block" id="twelf"></div>
      <div class="block" id="thirteen"></div>
   </div>

然后像这样更改您的css代码：

.wrapper {
    -moz-column-count: 4;
    -moz-column-gap: 5px;
    -webkit-column-count: 4;
    -webkit-column-gap: 5px;
    column-count: 4;
    column-gap: 5px;
}
.block{
    width:100%;
    display:inline-block;
    margin-bottom: 0px;
    margin-top:0px;
}
#one {
    height:150px;
    background:#ff0000;
}
#two {
    height:150px;
    background:#00ff00;
}
#three {
    height:300px;
    background:#0000ff;
}
#four {
    height:150px;
    background:#000000;
}
#five {
    height:150px;
    background:#ff0000;
}

刷新浏览器。
对我来说很好。