瀑布流布局的多種實現(xiàn)方式及其比較研究

董春俠+司占軍+張海月

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

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

中圖分類號：TP311 文獻標識碼：A 章編號：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 背景

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

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

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

瀑布流是一種網(wǎng)站頁面布局的形象化描述，其特點是采用定寬而不定高的設(shè)計，實現(xiàn)原理主要包含兩個部分，一個是對現(xiàn)有數(shù)據(jù)塊進行排列計算各自所在的位置； 二是動態(tài)加載數(shù)據(jù)，即下拉滾動時，觸發(fā)加載數(shù)據(jù)操作，并把數(shù)據(jù)添加到目標容器中[5]。

2.1 數(shù)據(jù)塊排列（對容器中已有元素num個進行排列）實現(xiàn)思路如下

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

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

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

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

5）獲取hArr中最小的值minH及其所在的索引index；

6）循環(huán)遍歷容器中的所有數(shù)據(jù)塊，將其放在minH所在列的下面，根據(jù)index，確定該數(shù)據(jù)塊的left，top值，left 為所在列的序號index乘以列寬cols，top 為所在列的當前高度；

7）更新所在列的當前高度，值為當前高度加上這個數(shù)據(jù)塊元素的高度。

2.2 動態(tài)加載數(shù)據(jù)

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

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

3 實現(xiàn)方式

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

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

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

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