資源描述：
《瀑布流布局的多種實(shí)現(xiàn)方式及其比較研究》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫(kù)。
1、瀑布流布局的多種實(shí)現(xiàn)方式及其比較研究 摘要：瀑布流布局突破了傳統(tǒng)網(wǎng)頁(yè)的布局方式，不僅設(shè)計(jì)獨(dú)特，更能帶來(lái)良好的用戶體驗(yàn)，使得展示類網(wǎng)站在視覺(jué)和功效上得到統(tǒng)一。該文從瀑布流布局的核心點(diǎn)出發(fā)，首先介紹瀑布流布局的原理，然后利用JavaScript、jQuery、CSS3三種方法實(shí)現(xiàn)瀑布流布局效果，并介紹其用到的相關(guān)知識(shí)點(diǎn)，最后對(duì)三種實(shí)現(xiàn)方式進(jìn)行比較，分析其各自性能的優(yōu)缺點(diǎn)?！ ￡P(guān)鍵詞：瀑布流布局；JavaScript；jQuery；CSS3 中圖分類號(hào)：TP311文獻(xiàn)標(biāo)識(shí)碼：A章編號(hào)：1009-3044（2016）25-0053-03 Abstract：Wate
2、rfallflowlayoutbrokethroughthetraditionalwebpagelayout.Itnotonlyhasuniquedesignstyle，butalsocanbringagooduserexperience，sothatthedisplaywebsitescanmakeaaccordanceinthevisualandeffectiveness.Thispaperstartsfromthecorepointofthewaterfallflowlayout.First，theprincipleofwaterfallflowlayou
3、twasintroduced，ThenusethreemethodsasJavaScript，jQuery，CSS3toachievetheeffectofthewaterfallflowlayout，andintroducetherelevantknowledge.Finally，theadvantagesanddisadvantagesofthethreemethodswerecomparedanalyzed. Keywords：waterfallflowlayout；javascript；jquery；css36 1背景 在“讀圖時(shí)代”的背景下，人們
4、在獲取信息時(shí)希望通過(guò)一種輕松愉快的方式[1]，在面對(duì)大量圖片洶涌而來(lái)時(shí)，傳統(tǒng)的表格布局、DIV+CSS布局已經(jīng)不能滿足網(wǎng)頁(yè)的布局要求，新型的瀑布流布局的出現(xiàn)改變了這一現(xiàn)狀，成為目前展示類網(wǎng)站中常用的一種布局方式。最早采用此布局的網(wǎng)站是Pinterest，瀏覽者通過(guò)快速掃視屏幕就可以在短時(shí)間內(nèi)獲得大量的信息，大大簡(jiǎn)化的瀏覽過(guò)程，符合人們?cè)谝苿?dòng)互聯(lián)網(wǎng)時(shí)代快速瀏覽的習(xí)慣，因此備受追捧[2]。懶加載模式是瀑布流布局的另外一大亮點(diǎn)，用戶不需要通過(guò)點(diǎn)擊鼠標(biāo)進(jìn)行翻頁(yè)，而是通過(guò)滑動(dòng)鼠標(biāo)滾輪來(lái)獲取更多信息[3]。 瀑布流布局的技術(shù)實(shí)現(xiàn)主要是應(yīng)用JavaScript技術(shù)或jQue
5、ry等JS框架，實(shí)現(xiàn)方法的原理基本都相同[4]。本文采用多種方式實(shí)現(xiàn)瀑布流布局，并對(duì)它們進(jìn)行比較，分析其各自性能的優(yōu)缺點(diǎn)?！ ?瀑布流布局的實(shí)現(xiàn)原理 瀑布流是一種網(wǎng)站頁(yè)面布局的形象化描述，其特點(diǎn)是采用定寬而不定高的設(shè)計(jì)，實(shí)現(xiàn)原理主要包含兩個(gè)部分，一個(gè)是對(duì)現(xiàn)有數(shù)據(jù)塊進(jìn)行排列計(jì)算各自所在的位置；二是動(dòng)態(tài)加載數(shù)據(jù)，即下拉滾動(dòng)時(shí)，觸發(fā)加載數(shù)據(jù)操作，并把數(shù)據(jù)添加到目標(biāo)容器中[5]?！ ?.1數(shù)據(jù)塊排列（對(duì)容器中已有元素num個(gè)進(jìn)行排列）實(shí)現(xiàn)思路如下 1）固定數(shù)據(jù)塊的寬度； 2）初始化，對(duì)容器中已有數(shù)據(jù)塊元素進(jìn)行計(jì)算，獲取可視區(qū)域的寬度clientW和數(shù)據(jù)塊的寬度oB
6、oxW，計(jì)算頁(yè)面中的列數(shù)cols（clientW/oBoxW）；6 3）設(shè)置容器的寬度（cols*oBoxW）和居中樣式； 4）定義一個(gè)數(shù)組hArr用來(lái)存放每列的高度； 5）獲取hArr中最小的值minH及其所在的索引index； 6）循環(huán)遍歷容器中的所有數(shù)據(jù)塊，將其放在minH所在列的下面，根據(jù)index，確定該數(shù)據(jù)塊的left，top值，left為所在列的序號(hào)index乘以列寬cols，top為所在列的當(dāng)前高度； 7）更新所在列的當(dāng)前高度，值為當(dāng)前高度加上這個(gè)數(shù)據(jù)塊元素的高度?！ ?.2動(dòng)態(tài)加載數(shù)據(jù) 1）綁定滾動(dòng)事件，并確定預(yù)加載線高度值，即滾動(dòng)
7、到哪個(gè)高度后，需要去加載數(shù)據(jù)，這里以容器中最后一個(gè)數(shù)據(jù)塊的高度（lastBoxH）與滾動(dòng)距離（scrollTop）加頁(yè)面高度（height）之和進(jìn)行比較，若lastBoxHscrollTop+height不進(jìn)行加載； 2）將新加載的數(shù)據(jù)渲染到頁(yè)面中?！ ?實(shí)現(xiàn)方式 瀑布流布局可以用三種方式進(jìn)行實(shí)現(xiàn)：原生JavaScript、jQuery和CSS3，然后利用Jason數(shù)據(jù)模擬后臺(tái)數(shù)據(jù)庫(kù)來(lái)不斷提供新的數(shù)據(jù)，再應(yīng)用JavaScript動(dòng)態(tài)加載數(shù)據(jù)塊，并渲染到頁(yè)面中。 3.1頁(yè)面結(jié)構(gòu)布局 瀑布流布局以是以數(shù)據(jù)塊來(lái)顯示數(shù)據(jù)的，各個(gè)數(shù)據(jù)塊的樣式基本相同，不同之處在于
8、數(shù)據(jù)塊內(nèi)部的文字和圖片，
