真的！！！兩行css代碼實現瀑布流，html,css最簡單的瀑布流實現方式且沒有缺點！

兩行css以下:

<style scoped> 
  .waterfall-container {
    /*分幾列*/
    column-count: 2;
  }

  .waterfall-item {
    /*不留白，不知道什麼意思能夠取消這個樣式試試*/
    break-inside: avoid;
  }
</style>

/*列間距，無關緊要，默認30px*/
/*column-gap: 0;*/

效果圖以下：

說明：不存在一邊列表過長問題，很均勻，沒有缺點

抱歉：有坑!!! 但能夠一鏈代碼解決

這個列表顯示順序是 左邊 123右邊456，不符合正常展現邏輯；而後可使用js對數據進行預處理；
大體邏輯以下：

const oldList = [1, 2, 3, 4, 5, 6, 7]

// 使用reduce函數接受一個初始值{ 0: [], 1: [], length: 2 },
// 初始值包含兩個空數組，和一個數組長度(Array.from方法要求將對象轉數組時對象內要有這個屬性) 
// 在reduce函數內根據索引作餘2判斷，由於分兩列，餘0的加入第一個數組，餘1的加入第二個數組 
// 最後reduce返回遍歷完的對象 {0:[1,3,5,7],1:[2,4,6],length:2}
// 使用Array.from({0:[1,3,5,7],1:[2,4,6],length:2}) 獲得 數組 [[1,3,5,7],[2,4,6]]
// 解構數組 使用concat合併，完事
const newList = [].concat(...(Array.from(oldList.reduce((total, cur, index) => {
  total[index % 2].push(cur)
  return total
}, { 0: [], 1: [], length: 2 }))))

console.log(newList)

輸出

[1, 3, 5, 7, 2, 4, 6]

這樣處理一下就能夠 讓列表展現順序變爲 左邊 1， 3， 5， 7 右邊 2， 4， 6

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>