注：如何運用Axure來(lai)設計瀑布流呢？文(wen)章給出了具體的設計思(si)路，一(yi)起來(lai)學習吧！

Pintrest作為(wei)瀑布流(liu)網(wang)站的(de)鼻祖，其一(yi)(yi)出現便受到(dao)追(zhui)捧(peng)。提到(dao)瀑布流(liu)網(wang)站，國內的(de)花瓣(ban)網(wang)不得(de)不提一(yi)(yi)下(xia)，也是將瀑布流(liu)做(zuo)到(dao)非(fei)常棒的(de)網(wang)站，國內的(de)設(she)計師(shi)非(fei)常喜歡到(dao)它上面(mian)逛逛，因為(wei)上面(mian)有很多優(you)秀的(de)設(she)計師(shi)收集的(de)畫板內容(rong)同樣優(you)秀。

如(ru)何使(shi)用Axure來設計這樣的(de)瀑(pu)布流的(de)效果(guo)呢(ni)？

我們先來(lai)分析(xi)一下(xia)這樣的網站交互效果，然后再討(tao)論(lun)一下(xia)設計思路(lu)。

 

瀑布流的(de)網站其(qi)實交互很簡(jian)單，當鼠(shu)標滾動到窗(chuang)口底(di)部超過一定(ding)距(ju)離(li)后(hou)，頁面會自動加載(zai)新的(de)數據填充在下方，繼(ji)續滾動頁面到下方底(di)部時(shi)，重(zhong)復相同的(de)動作(zuo)。

好，我們來分析一下(xia)實(shi)現(xian)的思路：

1. 需要不(bu)斷添加(jia)數據，以(yi)實現新的數據加(jia)載，這個毫無疑(yi)問(wen)想到的自(zi)然(ran)是(shi)使用中繼器來添加(jia)數據。

2. 我們可(ke)以發(fa)現花瓣網的(de)每張瀑(pu)布流圖片的(de)高度(du)不盡相同(tong)，因(yin)此會顯的(de)長長短短，也就是說(shuo)，它的(de)高度(du)是隨(sui)機(ji)的(de)，意思(si)就是說(shuo)，需要用到隨(sui)機(ji)函數來模板(ban)設(she)置每個圖片的(de)高度(du)。

3. 在(zai)滾動條(tiao)滾動到底部(bu)一定距離時，需(xu)要添加數(shu)(shu)據，這個需(xu)要判(pan)斷窗口的滾動位(wei)置和(he)當前中繼器(qi)的最(zui)下方(fang)位(wei)置作個比較，如(ru)果大于一定值則添加新的數(shu)(shu)據。

4. 另外要注意(yi)的(de)(de)是(shi)(shi)，不(bu)能設(she)置中繼器按網格方(fang)式(shi)排布，因為這種(zhong)方(fang)式(shi)下(xia)，每(mei)個數據(ju)所占(zhan)的(de)(de)寬和高是(shi)(shi)固定(ding)大小的(de)(de)，這樣就(jiu)沒辦(ban)法(fa)模擬長長短短并且(qie)每(mei)個圖(tu)片在垂直方(fang)向上(shang)是(shi)(shi)相互緊挨著。這里可能有點難以理解(jie)(jie)，看(kan)看(kan)下(xia)面的(de)(de)圖(tu)有助(zhu)于進(jin)一步理解(jie)(jie)。

對于這一點，我們可以使(shi)用多個中繼(ji)器(qi)來模(mo)擬，每個中繼(ji)器(qi)表示一列(lie)。

單(dan)擊這里查看(kan)在線(xian)演示效果。

下面來看看具體的實現步驟。

一、界面布局

添加(jia)一(yi)個中繼器，命名為col1，雙擊(ji)進入(ru)編(bian)輯狀(zhuang)態。這里僅作演示，只用一(yi)個矩(ju)形表示圖片，其它內(nei)容忽略(lve)。

調整中繼器默認矩形大(da)小(xiao)為(wei)(wei)200*320，背景顏色(se)(se)為(wei)(wei)灰(hui)色(se)(se)，設置背景陰影效(xiao)果(guo)如(ru)下圖，偏移都為(wei)(wei)0，模糊效(xiao)果(guo)大(da)小(xiao)為(wei)(wei)默認5，將(jiang)矩形命名為(wei)(wei)rect。

設(she)置(zhi)中繼器的垂直方(fang)向(xiang)間距為20。

好了，界面布局很簡單，先添加一個(ge)中繼器，等后(hou)(hou)面事件處理好后(hou)(hou)，復制幾個(ge)水平(ping)排(pai)列好即可。