网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

幫助

Axure原型設計:如何實現花瓣網的瀑布流?

2018-04-26 16:23 優化推廣

注:如何運用Axure來設計瀑布流呢?文章給出了具體的設計思路,一起來學習吧!

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

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

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

 

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

好,我們來分析一下實現的思路:

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

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

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

  4. 另外要注意的是,不能設置中繼器按網格方式排布,因為這種方式下,每個數據所占的寬和高是固定大小的,這樣就沒辦法模擬長長短短并且每個圖片在垂直方向上是相互緊挨著。這里可能有點難以理解,看看下面的圖有助于進一步理解。

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

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

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

一、界面布局

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

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

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

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


相關推薦

QQ在線咨詢
AI智能客服 ×