做一个图片画廊,完整 Prompt 模板直接用

图片画廊看着就是一堆图排列在一起,但它的网格布局、灯箱预览、懒加载和键盘导航组合在一起,是练习前端交互的经典项目。这篇文章给你一套完整 Prompt 模板,复制就能用。

图片画廊拆开看,就 5 个部分

图片画廊的 UI 很直观,但背后的交互逻辑有不少细节。

网格布局用 CSS Grid 自适应排列,不同屏幕宽度自动调整列数。灯箱预览是点击图片后的全屏放大查看,带遮罩层和左右切换。筛选分类让用户按标签或类别过滤展示,只看感兴趣的内容。懒加载让图片滚动到视口才加载,节省带宽,首屏更快。键盘导航让用户用左右键切换图片,ESC 关闭灯箱,操作效率翻倍。

灯箱交互,一条主线加两条分支

灯箱是画廊的核心交互,搞清楚状态怎么跳转,Prompt 就知道怎么写。

缩略图网格 → 点击图片 → 打开灯箱预览。这是入口。在灯箱里,按左键显示上一张,按右键显示下一张,两条并列分支,切换完回到灯箱预览态。按 ESC 或点击遮罩层,关闭灯箱,回到缩略图网格。

最终效果长什么样

用下面的 Prompt 模板生成后,效果大概是这样的。

顶部是标题「我的画廊」加四个分类标签(全部、风景、城市、人像),选中态为绿色填充。下方是 3×3 的图片网格,每个图片占位块用不同颜色区分类别(蓝色=风景,橙色=城市,绿色=人像)。底部提示文字「点击任意图片打开灯箱预览」。