起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure原型設計：如何實現花瓣網的瀑布流？
如何運用Axure來設計瀑布流呢？文章給出了具體的設計思路，一起來學習吧！
Pintrest作為瀑布流網站的鼻祖，其一出現便受到追捧。提到瀑布流網站，國內的花瓣網不得不提一下，也是將瀑布流做到非常棒的網站，國內的設計師非常喜歡到它上面逛逛，因為上面有很多優秀的設計師收集的畫板內容同樣優秀。
如何使用Axure來設計這樣的瀑布流的效果呢？
我們先來分析一下這樣的網站交互效果，然后再討論一下設計思路。
瀑布流的網站其實交互很簡單，當鼠標滾動到窗口底部超過一定距離后，頁面會自動加載新的數據填充在下方，繼續滾動頁面到下方底部時，重復相同的動作。
好，我們來分析一下實現的思路：
- 需要不斷添加數據，以實現新的數據加載，這個毫無疑問想到的自然是使用中繼器來添加數據。
- 我們可以發現花瓣網的每張瀑布流圖片的高度不盡相同，因此會顯的長長短短，也就是說，它的高度是隨機的，意思就是說，需要用到隨機函數來模板設置每個圖片的高度。
- 在滾動條滾動到底部一定距離時，需要添加數據，這個需要判斷窗口的滾動位置和當前中繼器的最下方位置作個比較，如果大于一定值則添加新的數據。
- 另外要注意的是，不能設置中繼器按網格方式排布，因為這種方式下，每個數據所占的寬和高是固定大小的，這樣就沒辦法模擬長長短短并且每個圖片在垂直方向上是相互緊挨著。這里可能有點難以理解，看看下面的圖有助于進一步理解。
對于這一點，我們可以使用多個中繼器來模擬，每個中繼器表示一列。
下面來看看具體的實現步驟。
一、界面布局
添加一個中繼器，命名為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預覽打開瀏覽器一下效果，滾動頁面向下，查看是否自動添加數據。
小結
這個例子真正做起來比較簡單，但即使簡單，我們也希望能從中學習到一些原型設計的知識和技巧。
- 中繼器的樣式設置
- 數學隨機函數的應用
- 中繼器每項加載時事件處理
- 頁面向下滾動時事件處理。
源文件下載
鏈接：https://pan.baidu.com/s/1c1JXUH6 密碼: bmya
本文由 @Axure原型設計工場 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自PEXELS，基于CCO協議
樓主您好，我這邊按照您的步驟操作，但在我的axure里預覽向下滾是沒有自動產生瀑布流的，我把您的原稿復制進我新建的axure頁面里，也是實現不了頁面往下滾自動生成瀑布流的，請問我大概是哪一步做錯了呢
直接使用我的原型可以嗎？方便的話把你的rp文件發我看看。+微信：zhuchuanming
樓主你好，我這邊操作時，窗口向下滾動這個動作在中繼器上是找不到，請問您這邊知道是哪里出了問題嗎，感謝了~
AXURE7是不是不能實現，控件尺寸變化的那一步驟？
Axure7沒有設置大小的動作。
然后呢？有什么卵用？誰不知道瀑布流的效果，你做的這個開發又不能復用，有意義嗎？你們這些新人凈tm鉆這些沒用的表面效果，而不注重討論研究信息交互和用戶的使用場景。丟了西瓜揀芝麻，這就是現在國內互聯網年輕產品經理的大眾現狀。
的確，工作中是要注重效率的。工作前拼命學交互動效，實際工作后對這些就是做一下說明而已。
通過教程來學習軟件的一些基本用法是教程的意義。
你在發表意見時，有發布過一篇教程告訴別人怎么使用這個軟件么？
我認為樓上2個的溝通有問題，都喜歡反駁別人的意見，其實可以多一步，他為什么這么說？
1、軟技能比硬技能更為重要
2、作者的論據有問題，你不能因為別人說這桃子不好吃，然后你就反駁不好吃你種個出來看看？不好吃你別吃?。坎缓贸阅憧梢猿蕴O果?。?/p>
純粹無聊回復
因為他不是抱著溝通的心態來的，使用了“卵用”和“TM”兩處不文明用語。自己不喜歡的就抨擊，還有人支持，服了
1、他說的話很糙，我并沒有支持；
2、他說的話很有道理，這只是一個工具，只是一個工具，只是一個工具。
你整點干貨來啊
你是家里出變故了還是童年有陰影？別人分享的內容是誤導你了還是涉嫌違規了？張口閉口你們這些新人年輕人的裝大尾巴狼。你這樣做前輩會有人尊重你？你為這個世界做了什么貢獻了？噴子真是無處不在。
說的有道理哦 ??
贊。我倒是希望看到瀑布流頁面分析和用戶行為分析。 另，這些人不是產品經理，就是原型設計
完了，后悔了，說重了請見諒。
這個網站，沒有留言撤銷功能。@_@