在H5頁面上實(shí)現(xiàn)瀑布流的顯示方式，可以產(chǎn)生錯(cuò)落有致的美感箍鼓，讓用戶在瀏覽時(shí)不至于視覺疲勞崭参，更吸引用戶繼續(xù)瀏覽。
雖然已有很多的瀑布流插件款咖，但是大多較復(fù)雜何暮，整合到自己的系統(tǒng)中時(shí)，有可能產(chǎn)生沖突铐殃，解決這些沖突還需要花額外的時(shí)間海洼，并且對(duì)動(dòng)態(tài)加載的分頁支持可能也會(huì)有沖突，所以我們需要個(gè)很簡單的瀑布流插件富腊，通過極少的代碼坏逢，就可以實(shí)現(xiàn)，以下介紹兩種極簡的方式赘被，同時(shí)分析下他們的優(yōu)缺點(diǎn)是整，供大家參考。
純css方式：通過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的方式雖然簡單，但是我們的期望是右側(cè)的內(nèi)容不變羊异，然后可以動(dòng)態(tài)在列表下面橫向的增加內(nèi)容事秀，顯然這種方式不滿足我們的要求。
純js方式：通過定位的方式
優(yōu)點(diǎn)：調(diào)用簡單野舶、達(dá)到期望值
缺點(diǎn)：需要對(duì)JS技術(shù)有一定的了解
首先確定要分幾列顯示易迹，可以通過配置的方式，具體的實(shí)現(xià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>
第二一屋、在頁面的樣式文件中窘疮，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è)放過去，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ì)從沒有更新的索引中查找最小值募闲，然后獲取它的left和height步脓，設(shè)置第二排第二個(gè)的top和left值，同時(shí)更新數(shù)組中該索引對(duì)應(yīng)的值,以此類推浩螺；
第五靴患、第三排重復(fù)第二排的操作，以此類推要出，就可以實(shí)現(xiàn)瀑布流顯示方式鸳君；
上面就是實(shí)現(xiàn)瀑布流的邏輯，理解了上面的原理之后厨幻，如果想擴(kuò)展下相嵌，比如加入一些動(dòng)畫等等都是可以實(shí)現(xiàn)。
