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

Pintrest作為瀑布流網站的始祖，其一出現便受到追捧。提到瀑布流網站，國內的花瓣網不得不提一下，也是將瀑布流做到非常棒的網站，國內的設計師非常喜歡到它上面逛逛，因為上面有很多優秀的設計師收集的畫板內容同樣優秀。

如何使用Axure來設計這樣的瀑布流的效果呢？

我們先來分析一下這樣的網站交互效果，然后再討論一下設計思路。

瀑布流的網站其實交互很簡單，當鼠標滾動到窗口底部超過必然距離后，頁面會自動加載新的數據填充不才方，繼續滾動頁面到下方底部時，重復相同的動作。

好，我們來分析一下實現的思路：

需要不停添加數據，以實現新的數據加載，這個毫無疑問想到的自然是使用中繼器來添加數據。

我們可以發現花瓣網的每張瀑布流圖片的高度不盡相同，因此會顯的長長短短，也就是說，它的高度是隨機的，意思就是說，需要用到隨機函數來模板設置每個圖片的高度。

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

別的要注意的是，不能設置中繼器按網格方式排布，因為這種方式下，每個數據所占的寬和高是固定大小的，這樣就沒措施模擬長長短短而且每個圖片在垂直標的目的上是彼此緊挨著。這里可能有點難以理解，看看下面的圖有助于進一步理解。

對于這一點，我們可以使用多個中繼器來模擬，每個中繼器體現一列。

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

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

添加一個中繼器，命名為col1，雙擊進入編纂狀態。這里僅作演示，只用一個矩形體現圖片，其它內容忽略。

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

設置中繼器的垂直標的目的間距為20。

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

標簽：烏魯木齊 鹽城 林芝 東營 九江