注：如何運(yùn)用Axure來(lái)設(shè)計(jì)瀑布流呢？文章給出了具體的設(shè)計(jì)思路，一起來(lái)學(xué)習(xí)吧！

Pintrest作為瀑布流網(wǎng)站的鼻祖，其一出現(xiàn)便受到追捧。提到瀑布流網(wǎng)站，國(guó)內(nèi)的花瓣網(wǎng)不得不提一下，也是將瀑布流做到非常棒的網(wǎng)站，國(guó)內(nèi)的設(shè)計(jì)師非常喜歡到它上面逛逛，因?yàn)樯厦嬗泻芏鄡?yōu)秀的設(shè)計(jì)師收集的畫板內(nèi)容同樣優(yōu)秀。

如何使用Axure來(lái)設(shè)計(jì)這樣的瀑布流的效果呢？

我們先來(lái)分析一下這樣的網(wǎng)站交互效果，然后再討論一下設(shè)計(jì)思路。

 

瀑布流的網(wǎng)站其實(shí)交互很簡(jiǎn)單，當(dāng)鼠標(biāo)滾動(dòng)到窗口底部超過一定距離后，頁(yè)面會(huì)自動(dòng)加載新的數(shù)據(jù)填充在下方，繼續(xù)滾動(dòng)頁(yè)面到下方底部時(shí)，重復(fù)相同的動(dòng)作。

好，我們來(lái)分析一下實(shí)現(xiàn)的思路：

1. 需要不斷添加數(shù)據(jù)，以實(shí)現(xiàn)新的數(shù)據(jù)加載，這個(gè)毫無(wú)疑問想到的自然是使用中繼器來(lái)添加數(shù)據(jù)。

2. 我們可以發(fā)現(xiàn)花瓣網(wǎng)的每張瀑布流圖片的高度不盡相同，因此會(huì)顯的長(zhǎng)長(zhǎng)短短，也就是說(shuō)，它的高度是隨機(jī)的，意思就是說(shuō)，需要用到隨機(jī)函數(shù)來(lái)模板設(shè)置每個(gè)圖片的高度。

3. 在滾動(dòng)條滾動(dòng)到底部一定距離時(shí)，需要添加數(shù)據(jù)，這個(gè)需要判斷窗口的滾動(dòng)位置和當(dāng)前中繼器的最下方位置作個(gè)比較，如果大于一定值則添加新的數(shù)據(jù)。

4. 另外要注意的是，不能設(shè)置中繼器按網(wǎng)格方式排布，因?yàn)檫@種方式下，每個(gè)數(shù)據(jù)所占的寬和高是固定大小的，這樣就沒辦法模擬長(zhǎng)長(zhǎng)短短并且每個(gè)圖片在垂直方向上是相互緊挨著。這里可能有點(diǎn)難以理解，看看下面的圖有助于進(jìn)一步理解。

對(duì)于這一點(diǎn)，我們可以使用多個(gè)中繼器來(lái)模擬，每個(gè)中繼器表示一列。

單擊這里查看在線演示效果。

下面來(lái)看看具體的實(shí)現(xiàn)步驟。

一、界面布局

添加一個(gè)中繼器，命名為col1，雙擊進(jìn)入編輯狀態(tài)。這里僅作演示，只用一個(gè)矩形表示圖片，其它內(nèi)容忽略。

調(diào)整中繼器默認(rèn)矩形大小為200*320，背景顏色為灰色，設(shè)置背景陰影效果如下圖，偏移都為0，模糊效果大小為默認(rèn)5，將矩形命名為rect。

設(shè)置中繼器的垂直方向間距為20。

好了，界面布局很簡(jiǎn)單，先添加一個(gè)中繼器，等后面事件處理好后，復(fù)制幾個(gè)水平排列好即可。