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

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

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

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

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

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

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

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

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

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

對(duì)于這一點(diǎn)，我們可以使用多個(gè)中繼器來模擬，每個(gè)中繼器體現(xiàn)一列。

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

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

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

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

設(shè)置中繼器的垂直標(biāo)的目的間距為20。

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

標(biāo)簽：烏魯木齊 鹽城 林芝 東營 九江