Axure原型設計：如何實現(xiàn)花瓣網(wǎng)的瀑布流？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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