今天教大家怎麼做一個漂亮的圖片牆。該原型用中繼器做的，所以使用的時候只需要簡單填寫表格內容即可，也可以當做學習中繼器交互的案例。如有喜歡該原型或者有什麼疑問的都可以在評論區留言。

效果演示

1. 自動輪播效果

2. 點擊顯示大圖

使用說明

只需要填寫中繼器內容即可。

height：這張圖片的高度；

picture：右鍵導入圖片即可。

製作教程

（1）製作動態面板

新建一個動態面板1，設置好大小，選擇背景色，案例中為黑色，取消自動調整內容尺寸；

在這個動態面板1下，再新建一個動態面板2，該動態面板選中自動調整內容尺寸，在動態面板2下麵新建中繼器。

（2）製作中繼器

中繼器內只需要新建一個圖片文件就可以，垂直佈局，行距按自己需要設置，案例行距是27。中繼器表格如上圖所示。

中繼器事件每項加載時：

設置圖片的尺寸，案例中寬是177，高是item.height，你們也可以自己設置適合的。

設置圖片的值為item.picture。

（3）製作移動效果

載入的向下移動動態面板2，移動時間按需要設置。

向下移動結束時，觸發向上移動，同樣也是向上移動動態面板2。

向上移動結束時，觸發向下移動，無限循環即可。

（4）製作點擊放大圖片效果

新建一個大圖，點擊中繼器內圖片時，顯示該大圖，然後設置圖片值=item.picture，再根據圖片設置顯示圖片的大小即可。

本期分享就完成了，如有喜歡該原型或者有什麼疑問的都可以在評論區留言。

本文由 @梓賢Vigo 原創發佈於人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash，基於CC0協議