兩行css如下：
.waterfall-container { /*分幾列*/ column-count: 2; /*列間距，可有可無，默認30px*/
/*column-gap: 0;*/ } .waterfall-item { /*不留白，不知道什么意思可以取消這個樣式試試*/
break-inside: avoid; }
效果如下：
說明：不存在一邊列表過長問題，很均勻，沒有缺點
抱歉：有坑!!! 但可以一鏈代碼解決
這個列表顯示順序是 左邊 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
以上代碼沒有問題，如果你用的老版瀏覽器可能存在兼容問題，就再多加幾個重復的兼容瀏覽器的屬性就行了，如下：
-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;