Image Collage 404

一个使用 HTML + CSS + 原生 JavaScript 制作的轻量级响应式 404 页面。

页面通过 52 个固定百分比槽位，将网站中的缩略图重复或顺序填充后拼成清晰的 404 数字。每张图片都可以设置独立链接，用户点击后可重新进入产品、案例、文章或其他有效内容页面。

项目不依赖第三方库，不需要 npm、构建工具或后端服务，适合直接部署到普通静态网站、企业网站或 WordPress 项目中。

当前稳定版本：v1.0.0

---

效果特点

• 使用 52 个缩略图槽位组成完整 404
• 默认提供 13 张 SVG 占位图
• 推荐使用 13 / 26 / 52 张真实网站图片
• 图片不足 52 张时自动重复填充
• 图片达到 52 张时可一一对应显示
• 每张缩略图都可以设置独立跳转链接
• 百分比坐标保证整体图形随容器缩放
• 图片加载时带轻量 3D 入场效果
• 图片由灰度自然过渡到彩色
• 桌面端 Hover 时自动放大当前图片
• 支持手机端响应式显示
• 支持 prefers-reduced-motion
• HTML、CSS、JavaScript、图片资源完全分离
• 无第三方依赖，可直接打开 index.html 预览

---

项目结构

image-collage-404/
│
├── index.html
├── README.md
│
├── css/
│   └── style.css
│
├── js/
│   ├── data.js
│   └── app.js
│
└── images/
    ├── placeholder-01.svg
    ├── placeholder-02.svg
    ├── ...
    └── placeholder-13.svg

各文件职责：

文件	作用	日常是否需要修改
index.html	页面基础结构和文字	偶尔
css/style.css	404 坐标、响应式、动画、Hover	通常不需要
js/data.js	图片、链接、标题数据	主要维护文件
js/app.js	52 个卡片的渲染、重复填充和加载动画	通常不需要
images/	示例 SVG 或真实网站缩略图	按需替换

---

快速使用

下载项目后直接打开：

index.html

即可预览。

正式部署时，可以将整个目录上传到网站对应目录，也可以把相关 HTML、CSS、JavaScript 集成到现有站点的 404 模板中。

---

日常维护

后期主要修改：

js/data.js

数据格式：

window.COLLAGE_PROJECTS = [
  {
    image: "/images/project-01.webp",
    url: "/projects/project-01/",
    title: "项目案例 01"
  },
  {
    image: "/images/project-02.webp",
    url: "/projects/project-02/",
    title: "项目案例 02"
  }
];

字段说明：

• image：缩略图地址
• url：点击图片后进入的页面
• title：图片说明，同时用于 title 和无障碍文本

正常维护内容时，通常不需要修改 app.js。

---

图片数量规则

页面内部固定使用：

52 个视觉槽位

但并不要求准备 52 张不同图片。

方案一：13 张图片

推荐用于内容数量较少的网站。

13 张图片
    ↓
自动重复
    ↓
填满 52 个槽位

13 张图片大约各出现 4 次。

优点：

• 准备素材最简单
• 维护成本低
• 重复拼贴效果明显
• 仍然能够保持完整的 404 轮廓

---

方案二：26 张图片

推荐用于已经有一定内容积累的网站。

26 张图片
    ↓
自动重复
    ↓
填满 52 个槽位

26 张图片大约各出现 2 次。

优点：

• 重复感明显降低
• 图片内容更加丰富
• 仍然不需要准备 52 张不同图片

---

方案三：52 张图片

如果网站本身已经拥有足够多的产品、文章或案例缩略图，可以准备完整的 52 张图片：

52 张图片
    ↓
52 个槽位

每张图片使用一次。

---

其他数量

程序同样支持其他数量：

• 少于 52 张：自动循环 / 错序复用
• 等于 52 张：每张图片使用一次
• 多于 52 张：默认只使用前 52 张

对于大多数实际网站，13～26 张图片已经足够。

---

为什么使用重复排列

这个页面的核心目标不是展示 52 张完全不同的图片，而是：

用网站内容本身组成一个一眼能够识别的 404。

如果卡片数量过少、尺寸过大，数字轮廓容易出现：

• 4 的斜线不连续
• 横杠或竖线不完整
• 0 的闭合感不足
• 三个数字容易发生视觉粘连

因此最终方案使用 更多、更小的缩略图槽位，同时允许图片重复。

这样可以兼顾：

404 识别度
+
真实网站内容
+
维护成本

---

52 个槽位如何组成 404

每张卡片都使用：

position: absolute;
left: ...%;
top: ...%;

定位。

例如：

.collage-404 a:nth-child(1) {
  left: 19%;
  top: 18%;
}

.collage-404 a:nth-child(2) {
  left: 15%;
  top: 25%;
}

52 个百分比坐标共同构成：

4   0   4

因为使用百分比而不是固定像素，所以整个图形可以随容器一起缩放。

---

数据驱动渲染

HTML 中没有手工写入 52 个 <a> 和 <img>。

数据来自：

js/data.js

然后由：

js/app.js

动态生成 52 个卡片。

整体关系：

data.js
   ↓
图片 / 链接 / 标题
   ↓
app.js
   ↓
生成 52 个卡片
   ↓
CSS nth-child 百分比坐标
   ↓
404

这种方式把：

• 内容数据
• 页面结构
• 视觉布局
• 动画逻辑

进行了分离。

---

图片重复机制

当图片数量不足 52 张时，JavaScript 会自动重复使用现有数据。

例如只有 13 张图片：

13 张原始图片
      ↓
生成可复用顺序
      ↓
填充 52 个位置

代码还会对复用顺序做简单错位处理，避免页面看起来像完全机械地复制同一组图片。

后期从 13 张增加到 26 张时，不需要修改核心 JavaScript，只需要继续向 data.js 增加数据即可。

---

图片规格建议

建议网站缩略图统一采用：

4 : 3

常见尺寸：

• 400 × 300
• 600 × 450
• 800 × 600

CSS 中已经使用：

aspect-ratio: 4 / 3;
object-fit: cover;

因此即使原始图片比例略有差异，卡片显示比例仍能保持统一。

推荐图片格式：

• WebP
• AVIF
• JPG

不建议直接使用数 MB 的原始大图。

404 页面只需要加载缩略图，建议控制单张图片文件大小。

---

替换为真实网站图片

示例 SVG 只是开发阶段的占位资源。

正式使用时，可以直接修改：

{
  image: "/images/project-01.webp",
  url: "/projects/project-01/",
  title: "工程案例"
}

推荐优先使用自己网站中的相对路径：

/images/project-01.webp
/uploads/project-01.webp
/wp-content/uploads/2026/08/project-01.webp

相比写死完整域名，相对路径更方便以后更换域名或调整部署环境。

---

WordPress 使用

如果用于 WordPress，可以直接引用媒体库生成的缩略图。

例如：

{
  image: "/wp-content/uploads/2026/08/product-400x300.webp",
  url: "/product/example-product/",
  title: "示例产品"
}

比较适合放入 404 的内容包括：

• 产品缩略图
• 工程案例封面
• 博客文章封面
• 项目截图
• 服务页面缩略图

用户点击对应图片后即可返回网站的有效内容页面。

---

图片加载动画

图片初始状态包含：

opacity: 0;
filter: grayscale(1);

加载完成后切换为：

opacity: 1;
filter: grayscale(0);

同时卡片使用少量：

translateZ()

配合父元素：

perspective: 500px;

形成轻量 3D 入场效果。

动画的目的只是让页面更有生命力，并不会改变 404 的主要结构。

---

Hover 交互

桌面端鼠标悬停到缩略图时：

• 当前图片适度放大
• z-index 自动提高
• 增加轻微阴影

这样即使 52 个卡片本身尺寸较小，用户仍然可以快速查看当前内容。

在触摸设备上不会依赖 Hover 才能访问内容。

---

响应式设计

404 的整体坐标使用百分比，因此桌面端与手机端可以共用同一套基本结构。

移动端会进一步调整：

• 404 容器尺寸
• 缩略图宽度
• 页面留白
• 标题字号

这样可以在缩小页面宽度时继续保持 404 的整体轮廓。

---

无障碍与动效偏好

项目为图片和链接设置了必要的文本信息，并支持：

@media (prefers-reduced-motion: reduce)

当用户操作系统启用“减少动态效果”时，会自动弱化动画。

---

后期扩展

当前版本建议保持轻量，不为了增加功能而增加复杂度。

如果未来确实有需求，可以考虑：

1. 修改图形

重新设计 nth-child() 坐标，可以把：

404

改为：

• 年份
• 数字
• 字母
• 简单 Logo
• 品牌缩写

2. 动态获取内容

目前数据直接维护在 data.js。

未来也可以替换为：

• WordPress REST API
• PHP JSON
• CMS 接口
• 本地 JSON

但对于普通 404 页面，没有必要默认加入后端依赖。

3. 内容分类

如果真实网站拥有大量内容，可以在生成图片列表之前按：

• 产品
• 案例
• 文章
• 推荐内容

进行筛选。

---

适用场景

除了 404 页面，这套图片拼贴方式还可以用于：

• 企业网站错误页
• 作品集网站
• 产品入口页
• 案例展示页
• 品牌视觉墙
• 活动落地页
• 图片导航页
• 数字 / 字母 / Logo 拼贴

---

维护原则

推荐长期保持以下文件相对稳定：

index.html
css/style.css
js/app.js

日常主要维护：

js/data.js
真实网站缩略图

也就是说：

改内容，不改核心逻辑。

这也是本项目长期维护的核心设计原则。

---

技术栈

• HTML5
• CSS3
• Vanilla JavaScript
• CSS 3D Transform
• Responsive Design
• SVG Placeholder

---

浏览器支持

面向当前主流现代浏览器：

• Chrome
• Edge
• Firefox
• Safari

不考虑旧版 Internet Explorer。

---

版本

v1.0.0

首个稳定版本。

主要内容：

• 完成 52 个固定槽位的 404 图片拼贴布局
• 支持 13 / 26 / 52 张图片使用方式
• 支持图片自动重复和错序复用
• 支持独立图片链接
• 完成桌面端和手机端响应式
• 加入图片加载与轻量 3D 动画
• 提供 13 张 SVG 占位图
• 完成中文 README 与维护说明

---

License

本项目用于前端学习、实验和网站项目基础模板。

示例 SVG 仅作为占位内容。正式项目请替换为自己拥有使用权限的图片资源。