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

（防災科技學院信息工程學院，河北 三河 065201）

1 引言

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

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

2 瀑布流的實現原理

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

3 jQuery實現瀑布流

3.1 頁面結構布局

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

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

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

圖2 基礎排版效果圖

3.2 jQuery實現定位數據塊

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

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

圖3 數據塊定位效果圖

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

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

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

圖4 jQuery實現瀑布流效果

4 結論

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