瀑布流布局設計與實現(xiàn)

韓姿一 王金峰 彭禹 侯林葉 張雪玉

【摘 要】隨著移動端購物的日漸成熟以及創(chuàng)意短視頻社交軟件的興起，人們對瀑布流形式的排版布局日漸熟悉。論文從高度自適應橫向瀑布流布局的核心原理出發(fā)，首先對該布局的可行性做出證明，然后利用jQuery實現(xiàn)橫向瀑布流布局效果，最后針對實際圖片尺寸存在較大差異的情況，提出進一步優(yōu)化展示的策略。

【關鍵詞】瀑布流;排版布局;頁面設計

【Keywords】waterfall flow; typesetting layout; page design

【中圖分類號】TP393.0? ? ? ? ? ? ? ? ? ? ? ? ? ? ?【文獻標志碼】A? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 【文章編號】1673-1069（2019）01-0096-02

1 引言

隨著電商行業(yè)的蓬勃發(fā)展，購物APP排版的整齊與否在競爭中起到了重要作用。為更好地滿足購物者的需求，以清晰簡潔為特點的瀑布流布局（waterfall layout）流行了起來。

最早采用此布局的網站是PINTEREST。瀑布流布局方式給網站用戶帶來了全新的體驗，所以許多大中型網站都使用了這一布局技術，諸如新浪微博微相冊、百度圖趣等，許多個人網站也加入了瀑布流布局的陣營[3]。瀑布流受用戶歡迎的原因還有矩陣特點，可以節(jié)省網絡資源，濃縮更大的圖片量，因此，在移動端布局設計中占據(jù)重要的表達方式[4]。瀑布流布局效果如圖1所示。

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

在瀑布流布局中，所有圖片的寬相等，高度不等。每個圖片都是通過計算定位的方式來確定其在瀑布流布局中的位置。

3 jQuery實現(xiàn)瀑布流

3.1 頁面結構布局

所有的數(shù)據(jù)塊都包含在一個div中，然后為每一個小數(shù)據(jù)塊分別設置一個div，此div的功能主要是為了定義每個數(shù)據(jù)塊的距離。因為每個數(shù)據(jù)塊都有各自的樣式，所以再用一個div來包含標簽。代碼如下：

?

因為每個div和pin都是需要相對于div#main做絕對定位的，所以div#main需要做相對定位。鑒于要獲得每個div的高度，所以對div和pin進行填充時盡量選擇padding而不是margin，并且需要加入float屬性讓每個div在一行中顯示出來，最后對每個div、box、img進行寬度和高度設置，至此頁面布局及CSS樣式完成。CSS代碼如下：

#main{ position： relative; }

.pin{ padding： 15px 0 0 15px;float： left;}

.box{padding：5px;}

.box img{width： 200px;height： auto;}

基礎排版效果如圖2所示。

3.2 jQuery實現(xiàn)定位數(shù)據(jù)塊

瀑布流的原理是挑選每一行中最矮的圖片，在此圖片的位置下面進行新圖片的擺放。第一步;先判斷出一行能夠擺放圖片的數(shù)量，方法是獲取到整個屏幕的寬度和每張圖片的寬度，用兩數(shù)做除取整計算出一行能夠擺放的圖片數(shù)量。第二步：通過數(shù)組遍歷獲得第一行中每張圖片的高度并存入數(shù)組，通過jQuery和inArray方法返回數(shù)組中高度最小的圖片的索引值。從第二行開始，不斷把新的圖片定位到第一行高度最小的圖片下面，定位方式就是用CSS樣式設置。主要代碼如下：

function imgLocation（） {

var box=$（".pin"）;var numArr=[];

var boxwidth=box.eq（0）.width（）;

var num=Math.floor（$（window）.width（）/boxwidth）;//一行擺放的圖片的個數(shù);

box.each（function （index，value） { var boxHeight=box.eq（index）.height（）;

if（index

在完成了以上代碼之后查看效果圖可以發(fā)現(xiàn)最新的圖片定位在最矮的圖片下面，數(shù)據(jù)塊定位效果如圖3所示。

3.3 動態(tài)加載圖片

瀑布流的特點是在移動滾動條的時候加載圖片，原理是獲取到最后一張圖片距離屏幕頂端的高度、窗口的高度和滾動的高度。如果當前最后一張圖片距離頂端的高度小于當前窗口的高度加上滾動條滾動的距離時開始加載圖片。主要代碼如下：

$（window）.on（"load"，function （） {imgLocation（）;

var dataImg={"data"：[{"src"："txt10.jpg"}，{"src"："txt9.jpg"}]};? //數(shù)據(jù)庫中的圖片

$（window）.scroll（function （） { if（getsideHeight（））{

$.each（dataImg.data，function （index，value） {

var pin=$（"