在H5頁面上實現(xiàn)瀑布流的顯示方式，可以產(chǎn)生錯落有致的美感，讓用戶在瀏覽時不至于視覺疲勞，更吸引用戶繼續(xù)瀏覽。
雖然已有很多的瀑布流插件，但是大多較復(fù)雜，整合到自己的系統(tǒng)中時，有可能產(chǎn)生沖突，解決這些沖突還需要花額外的時間，并且對動態(tài)加載的分頁支持可能也會有沖突，所以我們需要個很簡單的瀑布流插件，通過極少的代碼，就可以實現(xiàn)，以下介紹兩種極簡的方式，同時分析下他們的優(yōu)缺點，供大家參考。
純css方式：通過column方式，需要用到的樣式：
column-count：分幾列顯示
column-width：每列的寬
column-gap：列直接的空隙
優(yōu)點：代碼量少
缺點：按列顯示，動態(tài)加載更多內(nèi)容時右側(cè)的列的內(nèi)容會變化
純css的方式雖然簡單，但是我們的期望是右側(cè)的內(nèi)容不變，然后可以動態(tài)在列表下面橫向的增加內(nèi)容，顯然這種方式不滿足我們的要求。
純js方式：通過定位的方式
優(yōu)點：調(diào)用簡單、達(dá)到期望值
缺點：需要對JS技術(shù)有一定的了解
首先確定要分幾列顯示，可以通過配置的方式，具體的實現(xiàn)思路是：
簡單的幾個配置項：column:幾列，space:空隙的大小
第一、外層包裹一個div class 名稱wrapper (class名稱可以修改)，然后內(nèi)層的項目列表 div class 名稱item(class名稱可以修改)
<div class="wrapper"> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> ...</div>
第二、在頁面的樣式文件中，wrapper 的樣式定義position:relative, item樣式定義position:absolute；
第三、第一排的item，top值為0，第一排第一個item,left值為0，第一排第二個item,left 值為第一個item的寬度+空隙,后面的以此類推，并將每個item的高度加入到數(shù)組中待用；
第四、第二排，首先從上面保存的第一排的高度的數(shù)組中獲取最小高度的那個item，同時獲取它的索引值，用于判斷它所在的位置（即排在第幾列），然后將第二排的第一個放過去，left值和第一排（上面數(shù)組中記錄的值）最小高度的item的left值相同，top值為獲取的最小高度的item的高度+空隙的值，同時更新數(shù)組中對應(yīng)的索引的值為當(dāng)前item的top+ 當(dāng)前itemd高+空隙的值；第二個則找上面數(shù)組記錄的值，因為已經(jīng)更新了一個索引，這個索引對應(yīng)的值已經(jīng)變得更多，所以會從沒有更新的索引中查找最小值，然后獲取它的left和height，設(shè)置第二排第二個的top和left值，同時更新數(shù)組中該索引對應(yīng)的值,以此類推；
第五、第三排重復(fù)第二排的操作，以此類推，就可以實現(xiàn)瀑布流顯示方式；
上面就是實現(xiàn)瀑布流的邏輯，理解了上面的原理之后，如果想擴(kuò)展下，比如加入一些動畫等等都是可以實現(xiàn)。
