H5頁面瀑布流waterfall的純JS實(shí)現(xiàn)洪囤,超簡單徒坡,支持分頁加載

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末况脆,一起剝皮案震驚了整個(gè)濱河市饭宾,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌格了,老刑警劉巖看铆,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異盛末,居然都是意外死亡弹惦,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門悄但,熙熙樓的掌柜王于貴愁眉苦臉地迎上來棠隐,“玉大人,你說我怎么就攤上這事檐嚣≈螅” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長嗡贺。 經(jīng)常有香客問我隐解,道長,這世上最難降的妖魔是什么诫睬? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任煞茫,我火速辦了婚禮,結(jié)果婚禮上摄凡,老公的妹妹穿的比我還像新娘续徽。我一直安慰自己,他們只是感情好架谎,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布炸宵。 她就那樣靜靜地躺著,像睡著了一般谷扣。 火紅的嫁衣襯著肌膚如雪土全。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天会涎,我揣著相機(jī)與錄音裹匙,去河邊找鬼。 笑死末秃,一個(gè)胖子當(dāng)著我的面吹牛概页,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播练慕,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼惰匙,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了铃将?” 一聲冷哼從身側(cè)響起项鬼,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎劲阎,沒想到半個(gè)月后绘盟,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡悯仙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年龄毡,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片锡垄。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡沦零,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出货岭,到底是詐尸還是另有隱情路操,我是刑警寧澤序攘,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站寻拂,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏丈牢。R本人自食惡果不足惜祭钉,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望己沛。 院中可真熱鬧慌核,春花似錦、人聲如沸申尼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽师幕。三九已至粟按,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間霹粥,已是汗流浹背灭将。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留后控,地道東北人庙曙。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像浩淘,于是被迫代替她去往敵國和親捌朴。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 我們已經(jīng)總結(jié)出了瀑布流式布局的兩大特征: 內(nèi)容框?qū)挾裙潭ㄕ懦叨炔还潭ā?內(nèi)容框從左到右排列砂蔽,一行排滿后,其余內(nèi)容框...
    弦生_a3a3閱讀 472評(píng)論 0 0
  • 前言 瀑布流的布局常用于圖片展示頁面欣鳖,特點(diǎn)是圖片元素等寬不等高察皇,一列一列排列,就像瀑布一樣泽台。 實(shí)現(xiàn)方法什荣,前兩種CS...
    如沐春風(fēng)ei閱讀 2,314評(píng)論 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)怀酷。 注意:講述HT...
    kismetajun閱讀 27,522評(píng)論 1 45
  • html結(jié)構(gòu) (Emmet) (div.box>div.pic>img[src="images/$.jpg"])*...
    LaBaby_閱讀 640評(píng)論 0 0
  • client稻爬,page和screen的區(qū)別? clientX蜕依,clientY是觸摸點(diǎn)相對(duì)于viewport視口x,...
    change_22fa閱讀 1,653評(píng)論 1 1