今天教大家怎麼做一個漂亮的圖片牆。該原型用中繼器做的，所以使用的時候只需要簡單填寫表格內容即可，也可以當做學習中繼器交互的案例。如有喜歡該原型或者有什麼疑問的都可以在評論區留言。
效果演示
1. 自動輪播效果
2. 點擊顯示大圖
使用說明
只需要填寫中繼器內容即可。
height：這張圖片的高度；
picture：右鍵導入圖片即可。
製作教程
（1）製作動態面板
新建一個動態面板1，設置好大小，選擇背景色，案例中為黑色，取消自動調整內容尺寸；
在這個動態面板1下，再新建一個動態面板2，該動態面板選中自動調整內容尺寸，在動態面板2下面新建中繼器。
（2）製作中繼器
中繼器內只需要新建一個圖片文件就可以，垂直佈局，行距按自己需要設置，案例行距是27。中繼器表格如上圖所示。
中繼器事件每項加載時：
設置圖片的尺寸，案例中寬是177，高是item.height，你們也可以自己設置適合的。
設置圖片的值為item.picture。
（3）製作移動效果
載入的向下移動動態面板2，移動時間按需要設置。
向下移動結束時，觸發向上移動，同樣也是向上移動動態面板2。
向上移動結束時，觸發向下移動，無限循環即可。
（4）製作點擊放大圖片效果
新建一個大圖，點擊中繼器內圖片時，顯示該大圖，然後設置圖片值=item.picture，再根據圖片設置顯示圖片的大小即可。
本期分享就完成了，如有喜歡該原型或者有什麼疑問的都可以在評論區留言。
題圖來自 Unsplash，基於CC0協議
分享到:
閱讀更多 人人都是產品經理 的文章
