在H5頁(yè)面上實(shí)現(xiàn)瀑布流的顯示方式，可以產(chǎn)生錯(cuò)落有致的美感，讓用戶在瀏覽時(shí)不至于視覺(jué)疲勞，更吸引用戶繼續(xù)瀏覽。

雖然已有很多的瀑布流插件，但是大多較復(fù)雜，整合到自己的系統(tǒng)中時(shí)，有可能產(chǎn)生沖突，解決這些沖突還需要花額外的時(shí)間，并且對(duì)動(dòng)態(tài)加載的分頁(yè)支持可能也會(huì)有沖突，所以我們需要個(gè)很簡(jiǎn)單的瀑布流插件，通過(guò)極少的代碼，就可以實(shí)現(xiàn)，以下介紹兩種極簡(jiǎn)的方式，同時(shí)分析下他們的優(yōu)缺點(diǎn)，供大家參考。

純css方式：通過(guò)column方式，需要用到的樣式：

column-count：分幾列顯示

column-width：每列的寬

column-gap：列直接的空隙

優(yōu)點(diǎn)：代碼量少

缺點(diǎn)：按列顯示，動(dòng)態(tài)加載更多內(nèi)容時(shí)右側(cè)的列的內(nèi)容會(huì)變化

純css的方式雖然簡(jiǎn)單，但是我們的期望是右側(cè)的內(nèi)容不變，然后可以動(dòng)態(tài)在列表下面橫向的增加內(nèi)容，顯然這種方式不滿足我們的要求。

純js方式：通過(guò)定位的方式

優(yōu)點(diǎn)：調(diào)用簡(jiǎn)單、達(dá)到期望值

缺點(diǎn)：需要對(duì)JS技術(shù)有一定的了解

首先確定要分幾列顯示，可以通過(guò)配置的方式，具體的實(shí)現(xiàn)思路是：

簡(jiǎn)單的幾個(gè)配置項(xiàng)：column:幾列，space:空隙的大小

第一、外層包裹一個(gè)div class 名稱wrapper (class名稱可以修改)，然后內(nèi)層的項(xiàng)目列表 div class 名稱item(class名稱可以修改)

<div class="wrapper"> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> ...</div>

第二、在頁(yè)面的樣式文件中，wrapper 的樣式定義position:relative, item樣式定義position:absolute；

第三、第一排的item，top值為0，第一排第一個(gè)item,left值為0，第一排第二個(gè)item,left 值為第一個(gè)item的寬度+空隙,后面的以此類推，并將每個(gè)item的高度加入到數(shù)組中待用；

第四、第二排，首先從上面保存的第一排的高度的數(shù)組中獲取最小高度的那個(gè)item，同時(shí)獲取它的索引值，用于判斷它所在的位置（即排在第幾列），然后將第二排的第一個(gè)放過(guò)去，left值和第一排（上面數(shù)組中記錄的值）最小高度的item的left值相同，top值為獲取的最小高度的item的高度+空隙的值，同時(shí)更新數(shù)組中對(duì)應(yīng)的索引的值為當(dāng)前item的top+ 當(dāng)前itemd高+空隙的值；第二個(gè)則找上面數(shù)組記錄的值，因?yàn)橐呀?jīng)更新了一個(gè)索引，這個(gè)索引對(duì)應(yīng)的值已經(jīng)變得更多，所以會(huì)從沒(méi)有更新的索引中查找最小值，然后獲取它的left和height，設(shè)置第二排第二個(gè)的top和left值，同時(shí)更新數(shù)組中該索引對(duì)應(yīng)的值,以此類推；

第五、第三排重復(fù)第二排的操作，以此類推，就可以實(shí)現(xiàn)瀑布流顯示方式；

上面就是實(shí)現(xiàn)瀑布流的邏輯，理解了上面的原理之后，如果想擴(kuò)展下，比如加入一些動(dòng)畫(huà)等等都是可以實(shí)現(xiàn)。