兩行css如下:
```
<style scoped>
.waterfall-container {
/*分幾列*/
column-count: 2;
}
.waterfall-item {
/*不留白，不知道什麼意思可以取消這個樣式試試*/
break-inside: avoid;
}
</style>
```
```
/*列間距，可有可無，默認30px*/
/*column-gap: 0;*/
```
效果圖如下：
說明：不存在一邊列表過長問題，很均勻，沒有缺點
2019年1月12日
我用的chrome 版本 70.0.3538.102（正式版本） （64 位）
以上代碼沒有問題，如果你用的老版瀏覽器可能存在兼容問題，就再多加幾個重複的兼容瀏覽器的屬性就行了，如下：
```
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
```
以此類推
html代碼大致如下：
```
<div class="waterfall-container">
<div class="waterfall-item" v-for="i in 100"> vue的語法，不會就粘貼20個div看效果
內容... 這裏可以自己實現寬高不一樣的div，看效果
</div>
</div>
```
之前還用flex實現了一個，有坑，一邊太長，一邊太短,請先大致瞭解flex，寫過demo再往下看，效果圖如下：
實現方式如下：
一行裏面兩列，可以控制每列數量相等，
每列裏面各自循環，下面僞代碼
但是有個坑，如果左邊都很高，右邊比較矮，就會出現右邊空很多的內容， 在找解決辦法
下面的 <row> 指的是
css：
```
.row{
display:flex;
flex-direction:row;
}
```
<col>同理
```
<row>
<col width=50%>
<div v-for='i fo 50'>
</col>
<col width=50%>
<div v-for='i fo 50'>
</col>
</row>
```