真的！！！兩行css代碼實(shí)現(xiàn)瀑布流；

兩行css如下:

/*列間距，可有可無，默認(rèn)30px*/
/*column-gap: 0;*/

效果圖如下：

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

抱歉：有坑!!! 但可以一鏈代碼解決

這個(gè)列表顯示順序是 左邊 123右邊456，不符合正常展示邏輯；然后可以使用js對(duì)數(shù)據(jù)進(jìn)行預(yù)處理；
大致邏輯如下：

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

// 使用reduce函數(shù)接受一個(gè)初始值{ 0: [], 1: [], length: 2 },
// 初始值包含兩個(gè)空數(shù)組，和一個(gè)數(shù)組長度(Array.from方法要求將對(duì)象轉(zhuǎn)數(shù)組時(shí)對(duì)象內(nèi)要有這個(gè)屬性)
// 在reduce函數(shù)內(nèi)根據(jù)索引做余2判斷，因?yàn)榉謨桑?的加入第一個(gè)數(shù)組，余1的加入第二個(gè)數(shù)組
// 最后reduce返回遍歷完的對(duì)象 {0:[1,3,5,7],1:[2,4,6],length:2}
// 使用Array.from({0:[1,3,5,7],1:[2,4,6],length:2}) 得到 數(shù)組 [[1,3,5,7],[2,4,6]]
// 解構(gòu)數(shù)組 使用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]

這樣處理一下就可以 讓列表展示順序變?yōu)?左邊 1， 3， 5， 7 右邊 2， 4， 6

2019年1月12日
我用的chrome 版本 70.0.3538.102（正式版本） （64 位）
以上代碼沒有問題，如果你用的老版瀏覽器可能存在兼容問題，就再多加幾個(gè)重復(fù)的兼容瀏覽器的屬性就行了，如下：

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

class="waterfall-container">
 ? ?
class="waterfall-item" v-for="i in 100"> vue的語法，不會(huì)就粘貼20個(gè)div看效果
 ? ? ? ?內(nèi)容... 這里可以自己實(shí)現(xiàn)寬高不一樣的div，看效果
 ? ?

之前還用flex實(shí)現(xiàn)了一個(gè)，有坑，一邊太長，一邊太短,請(qǐng)先大致了解flex，寫過demo再往下看，效果圖如下：

實(shí)現(xiàn)方式如下：

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

每列里面各自循環(huán)，下面?zhèn)未a

但是有個(gè)坑，如果左邊都很高，右邊比較矮，就會(huì)出現(xiàn)右邊空很多的內(nèi)容， 在找解決辦法

下面的 指的是
css：

.row{ ? ?
 ? ?display:flex;
 ? ?flex-direction:row;
}

同理

 ? ?width=50%>
 ? ? ? ? 
v-for='i fo 50'>
 ? ?
 ? ?width=50%>
 ? ? ? ?
v-for='i fo 50'>
 ? ?

作者：coder94

https://segmentfault.com/a/1190000017866549

—————END—————

歡迎關(guān)注“Java引導(dǎo)者”，我們分享最有價(jià)值的Java的干貨文章，助力您成為有思想的Java開發(fā)工程師！

掃描二維碼

獲取更多精彩

Java引導(dǎo)者

喜歡就點(diǎn)個(gè)"在看"唄^_^