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

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

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

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

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

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

1. 需要不斷添加數據，以實現新的數據加載，這個毫無疑問想到的自然是使用中繼器來添加數據。
2. 我們可以發現花瓣網的每張瀑布流圖片的高度不盡相同，因此會顯的長長短短，也就是說，它的高度是隨機的，意思就是說，需要用到隨機函數來模板設置每個圖片的高度。
3. 在滾動條滾動到底部一定距離時，需要添加數據，這個需要判斷窗口的滾動位置和當前中繼器的最下方位置作個比較，如果大于一定值則添加新的數據。
4. 另外要注意的是，不能設置中繼器按網格方式排布，因為這種方式下，每個數據所占的寬和高是固定大小的，這樣就沒辦法模擬長長短短并且每個圖片在垂直方向上是相互緊挨著。這里可能有點難以理解，看看下面的圖有助于進一步理解。

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

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

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

一、界面布局

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

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

設置中繼器的垂直方向間距為20。

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

二、事件處理

這個例子主要是事件的處理，分別是中繼器的每項加載時事件，以及頁面窗口的向下滾動事件。

1、中繼器每項加載時事件

簡單解釋一下高度的設置，[[Math.random()*200+150]]，表示矩形高度最小為150，最大為150+200=350，因為Math.random()的值為0~1之間，Math.random()*200表示0~200之間。

每一個新加的矩形在初始化時都會被設置成隨機高度在150~350之間。

2、窗口向下滾動時事件

窗口向下滾動事件里添加一個條件判斷，如果窗口的高度+滾動條滾動的距離+200>中繼器的最下方位置，則添加一條新的記錄。

步驟2的表達式：[[Window.height+Window.scrollY+200]]

步驟3的表達式：[[LVAR1.height+LVAR1.y]]，其中局部變量LVAR1表示的是中繼器元件。

添加一行的操作如下：

隨便添加一條數據即可。

三、多個中繼器展示

復制中繼器col1為col2、col3、col4，在水平方向上依次排列。

我們可以看到每個被復制的中繼器在預覽時已經顯示出不同的高度，來修改一下頁面向下滾動事件，為中繼器col2、col3、col4分別添加一行。

四、預覽

F5預覽打開瀏覽器一下效果，滾動頁面向下，查看是否自動添加數據。

小結

這個例子真正做起來比較簡單，但即使簡單，我們也希望能從中學習到一些原型設計的知識和技巧。

1. 中繼器的樣式設置
2. 數學隨機函數的應用
3. 中繼器每項加載時事件處理
4. 頁面向下滾動時事件處理。

源文件下載

鏈接：https://pan.baidu.com/s/1c1JXUH6 密碼: bmya

本文由 @Axure原型設計工場 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自PEXELS，基于CCO協議