董春俠+司占軍+張海月

摘要：瀑布流布局突破了傳統(tǒng)網(wǎng)頁的布局方式，不僅設(shè)計(jì)獨(dú)特，更能帶來良好的用戶體驗(yàn)，使得展示類網(wǎng)站在視覺和功效上得到統(tǒng)一。該文從瀑布流布局的核心點(diǎn)出發(fā)，首先介紹瀑布流布局的原理，然后利用JavaScript、jQuery、CSS3三種方法實(shí)現(xiàn)瀑布流布局效果，并介紹其用到的相關(guān)知識(shí)點(diǎn)，最后對三種實(shí)現(xiàn)方式進(jìn)行比較，分析其各自性能的優(yōu)缺點(diǎn)。

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

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

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

2 瀑布流布局的實(shí)現(xiàn)原理

瀑布流是一種網(wǎng)站頁面布局的形象化描述，其特點(diǎn)是采用定寬而不定高的設(shè)計(jì)，實(shí)現(xiàn)原理主要包含兩個(gè)部分，一個(gè)是對現(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ù)塊排列（對容器中已有元素num個(gè)進(jìn)行排列）實(shí)現(xiàn)思路如下

1）固定數(shù)據(jù)塊的寬度；

2）初始化，對容器中已有數(shù)據(jù)塊元素進(jìn)行計(jì)算，獲取可視區(qū)域的寬度clientW和數(shù)據(jù)塊的寬度oBoxW，計(jì)算頁面中的列數(shù)cols（clientW/oBoxW）；

3）設(shè)置容器的寬度（cols*oBoxW）和居中樣式；

4）定義一個(gè)數(shù)組hArr用來存放每列的高度；

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ù)加載線高度值，即滾動(dòng)到哪個(gè)高度后，需要去加載數(shù)據(jù)，這里以容器中最后一個(gè)數(shù)據(jù)塊的高度（lastBoxH）與滾動(dòng)距離（scrollTop）加頁面高度（height）之和進(jìn)行比較，若lastBoxH< scrollTop+ height，進(jìn)行加載數(shù)據(jù)，若lastBoxH> scrollTop+ height不進(jìn)行加載；

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

3 實(shí)現(xiàn)方式

瀑布流布局可以用三種方式進(jìn)行實(shí)現(xiàn)：原生JavaScript、jQuery和CSS3，然后利用Jason 數(shù)據(jù)模擬后臺(tái)數(shù)據(jù)庫來不斷提供新的數(shù)據(jù)，再應(yīng)用 JavaScript動(dòng)態(tài)加載數(shù)據(jù)塊，并渲染到頁面中。

3.1 頁面結(jié)構(gòu)布局

瀑布流布局以是以數(shù)據(jù)塊來顯示數(shù)據(jù)的，各個(gè)數(shù)據(jù)塊的樣式基本相同，不同之處在于數(shù)據(jù)塊內(nèi)部的文字和圖片，因此頁面結(jié)構(gòu)的布局代碼如下：

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