兩行css如下:

.waterfall-container {

/*分幾列*/

column-count: 2;

}

.waterfall-item {

/*不留白，不知道什么意思可以取消這個樣式試試*/

break-inside: avoid;

}

/*列間距，可有可無，默認30px*/

微信圖片_20200701085236.jpg

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

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代碼大致如下：

/

vue的語法，不會就粘貼20個div看效果

[圖片上傳中...(微信圖片_20200701085754.jpg-9627a9-1593565107200-0)]

內容... 這里可以自己實現寬高不一樣的div，看效果

之前還用flex實現了一個，有坑，一邊太長，一邊太短,請先大致了解flex，寫過demo再往下看，效果圖如下：

微信圖片_20200701085754.jpg

實現方式如下：

一行里面兩列，可以控制每列數量相等，

每列里面各自循環，下面偽代碼

但是有個坑，如果左邊都很高，右邊比較矮，就會出現右邊空很多的內容， 在找解決辦法

下面的 指的是

css：

.row{

display:flex;

flex-direction:row;

}

同理

總結

以上是生活随笔為你收集整理的图片瀑布流Html,真的！！！两行css代码实现瀑布流，html,css最简单的瀑布流实现方式且没有缺点...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。