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

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

（防災(zāi)科技學(xué)院信息工程學(xué)院，河北 三河 065201）

1 引言

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

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

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

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

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

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

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

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

基礎(chǔ)排版效果如圖2所示。

圖2 基礎(chǔ)排版效果圖

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

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

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

圖3 數(shù)據(jù)塊定位效果圖

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

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

完成了動態(tài)加載圖片代碼后，當往下拖動滾動條時，理論上可以實現(xiàn)在同一個頁面中無限加載新數(shù)據(jù)塊。實現(xiàn)效果如圖4所示。

圖4 jQuery實現(xiàn)瀑布流效果

4 結(jié)論

瀑布流對于圖片的展現(xiàn)是高效而具有吸引力的，用戶一眼掃過的快速閱讀模式可以在短時間內(nèi)獲得更多的信息量，而瀑布流里懶加載模式又避免了用戶鼠標點擊的翻頁操作[1]。目前，Pinterest模式已成為發(fā)展最為迅速的社會化電子商務(wù)模式之一，探討Pinterest模式下社會化電子商務(wù)網(wǎng)站用戶購買意愿的影響因素，不僅有利于提高網(wǎng)站對用戶的吸引力，而且對網(wǎng)站保持競爭力和穩(wěn)定發(fā)展具有一定的現(xiàn)實意義[2]。