1、立项原因：两个孩子从4岁到10岁陆续画了上百张画，纸质原作容易折损褪色，又散落在家里各处，既难以检索，也不方便分享给异地的长辈。市面上的相册类工具只能按时间堆叠图片，无法承载每幅画的创作年龄、媒介和背后的故事，孩子回看时也缺少"被郑重对待"的感觉。本项目旨在把这些零散的纸质作品，整理成一座可长期留存、可随时分享的线上"纸上博物馆"。
2、行业场景：面向家庭数字资产管理与儿童美育记录场景。借鉴美术馆的策展逻辑——按节气分期布展、按作者分区、每件作品配馆藏编号与展签解读——把家庭内容做成一个可对外传播的轻量站点，同时作为个人前端作品集展示交互与视觉实现能力。
1、展厅列表页：以瀑布流画廊呈现全部作品，卡片模拟中式立轴装裱（轴头、宣纸底纹、朱红名章），图片按原始比例展示，悬停有轻微上浮反馈。
2、节气分期展区：作品按创作时间归入"立夏""谷雨""清明"等展区，每区带中英文标题与节气注解，形成时间轴叙事。
3、作者筛选：顶部导航与筛选按钮支持按作者（灵昀/灵曦）切换；作者名片展示专属色、作品数与年龄，再次点击可取消筛选返回全部。
4、作品详情页：左右分栏展示大图与展签，含作品中英文名、作者、创作年龄、媒介、中文大写创作日期、馆藏编号（№ 003/011）及一段策展式解读文案。
5、作品间导航：详情页支持上一幅/下一幅切换，到达边界自动置灰；支持键盘左右方向键翻页、Esc 返回展厅。
6、锚点路由与分享：打开详情页会写入 URL hash，可把单幅作品的链接直接分享给他人并一键直达。
7、响应式适配：桌面 4 列、平板 3/2 列、手机单列自动切换，移动端导航栏与筛选栏吸顶显示。
1、我负责的任务：独立完成产品设计、视觉设计与前端开发全部工作，包括作品数据整理、展签文案撰写、页面实现与移动端适配。
2、技术栈与架构：原生 HTML5 + CSS3 + JavaScript（ES6+），零第三方依赖、零构建步骤，纯静态部署，可直接托管于任意静态服务器或 CDN。数据与视图分离，全部作品以结构化数组集中维护，新增作品只需追加一条记录，页面自动渲染。
3、实现亮点：（1）手写瀑布流布局引擎，不依赖任何库，依据每张图片的宽高比预计算卡片高度，用"最短列优先"装箱算法排布，避免等图片加载完成才布局导致的页面抖动，并支持卡片跨列展示。（2）布局稳定性：对 resize 做 150ms 防抖重排，并在 document.fonts.ready 后二次重排，解决 Web 字体加载前后文字高度变化引起的错位。（3）体验细节：图片 lazy 懒加载、卡片按索引递增入场动画、日期渲染为中文大写（二〇二六年五月八日）、移动端吸顶栏毛玻璃效果。
4、难点：图片宽高比跨度大（0.75~1.33）时如何保证多列视觉平衡。最终放弃 CSS multi-column 方案（会打乱阅读顺序），改用绝对定位 + transform 摆放卡片，并对作品数少于 4 件的展区限制列宽上限 360px，避免卡片被过度拉伸。
评论