在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)。