董春俠+司占軍+張海月

摘要：瀑布流布局突破了傳統(tǒng)網(wǎng)頁(yè)的布局方式，不僅設(shè)計(jì)獨(dú)特，更能帶來(lái)良好的用戶(hù)體驗(yàn)，使得展示類(lèi)網(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)。

關(guān)鍵詞：瀑布流布局；JavaScript；jQuery；CSS3

中圖分類(lèi)號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 章編號(hào)：1009-3044（2016）25-0053-03

Abstract： Waterfall flow layout broke through the traditional web page layout .It not only has unique design style， but also can bring a good user experience， so that the display websites can make a accordance in the visual and effectiveness. This paper starts from the core point of the waterfall flow layout. First，the principle of waterfall flow layout was introduced，Then use three methods as JavaScript， jQuery， CSS3 to achieve the effect of the waterfall flow layout， and introduce the relevant knowledge. Finally， the advantages and disadvantages of the three methods were compared analyzed.

Key words： waterfall flow layout； javascript； jquery； css3

1 背景

在“讀圖時(shí)代”的背景下，人們?cè)讷@取信息時(shí)希望通過(guò)一種輕松愉快的方式[1]，在面對(duì)大量圖片洶涌而來(lái)時(shí)，傳統(tǒng)的表格布局、DIV+CSS 布局已經(jīng)不能滿(mǎn)足網(wǎng)頁(yè)的布局要求，新型的瀑布流布局的出現(xiàn)改變了這一現(xiàn)狀，成為目前展示類(lèi)網(wǎng)站中常用的一種布局方式。最早采用此布局的網(wǎng)站是Pinterest，瀏覽者通過(guò)快速掃視屏幕就可以在短時(shí)間內(nèi)獲得大量的信息，大大簡(jiǎn)化的瀏覽過(guò)程，符合人們?cè)谝苿?dòng)互聯(lián)網(wǎng)時(shí)代快速瀏覽的習(xí)慣，因此備受追捧[2]。懶加載模式是瀑布流布局的另外一大亮點(diǎn)，用戶(hù)不需要通過(guò)點(diǎn)擊鼠標(biāo)進(jìn)行翻頁(yè)，而是通過(guò)滑動(dòng)鼠標(biāo)滾輪來(lái)獲取更多信息[3]。

瀑布流布局的技術(shù)實(shí)現(xiàn)主要是應(yīng)用 JavaScript 技術(shù)或jQuery 等 JS 框架，實(shí)現(xiàn)方法的原理基本都相同[4]。本文采用多種方式實(shí)現(xiàn)瀑布流布局，并對(duì)它們進(jìn)行比較，分析其各自性能的優(yōu)缺點(diǎn)。

2 瀑布流布局的實(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]。

2.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ù)塊的寬度oBoxW，計(jì)算頁(yè)面中的列數(shù)cols（clientW/oBoxW）；

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.2 動(dòng)態(tài)加載數(shù)據(jù)

1）綁定滾動(dòng)事件，并確定預(yù)加載線(xiàn)高度值，即滾動(dòng)到哪個(gè)高度后，需要去加載數(shù)據(jù)，這里以容器中最后一個(gè)數(shù)據(jù)塊的高度（lastBoxH）與滾動(dòng)距離（scrollTop）加頁(yè)面高度（height）之和進(jìn)行比較，若lastBoxH< scrollTop+ height，進(jìn)行加載數(shù)據(jù)，若lastBoxH> scrollTop+ height不進(jìn)行加載；

2）將新加載的數(shù)據(jù)渲染到頁(yè)面中。

3 實(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ù)塊的樣式基本相同，不同之處在于數(shù)據(jù)塊內(nèi)部的文字和圖片，因此頁(yè)面結(jié)構(gòu)的布局代碼如下：

1 [2] [3] 存入我的閱覽室