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

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

【關(guān)鍵詞】瀑布流;排版布局;頁(yè)面設(shè)計(jì)

【Keywords】waterfall flow; typesetting layout; page design

【中圖分類號(hào)】TP393.0? ? ? ? ? ? ? ? ? ? ? ? ? ? ?【文獻(xiàn)標(biāo)志碼】A? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 【文章編號(hào)】1673-1069（2019）01-0096-02

1 引言

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

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

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

在瀑布流布局中，所有圖片的寬相等，高度不等。每個(gè)圖片都是通過(guò)計(jì)算定位的方式來(lái)確定其在瀑布流布局中的位置。

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

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

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

?

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

#main{ position： relative; }

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

.box{padding：5px;}

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

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

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

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

function imgLocation（） {

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

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

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

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

if（index

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

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

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

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

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

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

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

var pin=$（"