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

Question

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

在这里查看我的 JSfiddle:
http://jsfiddle.net/44ffoafu/1/
(我想让方 block 漂浮在空白处)

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

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

我知道像 FreeWall 和 Masonry 这样的 javascript，但我正在寻找一种更简单的方法和一种使用百分比的方法。仅 CSS 的解决方案是我正在寻找的，但如果有人有小的 javascript hack，也请告诉我!

Answer 1

你可以试试这个:仅使用纯 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;
} 

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