从零搭建二次元动漫图库 - 纯静态方案与实现原理

我最近搭了一个纯静态的二次元动漫图库，地址是 https://tu.hakimi.de5.net。

简单说，这就是一个展示动漫图片的网页，没有后端服务器，所有图片都存在图床上。你打开网页就能看到瀑布流排列的图片，点一下就能看到大图，还可以通过 API 获取随机图片。

它是什么

这个图库收录了 1182 张 动漫图片（402 张横图 + 780 张竖图），主要功能：

瀑布流布局浏览，响应式适配手机和电脑
樱花飘落动画背景
随机图片 API，支持外部调用
纯静态，部署在 EdgeOne Pages，免费加速

你可以把它理解成「一个放在云上的动漫相册」，好处是不需要自己买服务器，打开就能看。

基础架构

技术栈

前端：HTML5 + CSS3 + JavaScript（零框架）
部署：EdgeOne Pages（免费静态托管）
域名：tu.hakimi.de5.net
图片源：外部图床（list.yppp.net）

目录结构

anime-images/
├── index.html           # 主页
├── css/
│   └── style.css        # 样式文件
├── js/
│   └── main.js          # 核心逻辑
├── images/
│   ├── landscape.txt    # 横图 URL 列表
│   └── portrait.txt     # 竖图 URL 列表
├── api/
│   ├── random.html      # 随机图片 API（前端实现）
│   └── random.js        # 随机图片 API（Edge Function）
├── docs/
│   └── index.html       # API 文档
└── edgeone.json         # EdgeOne 部署配置

核心原理

1. 瀑布流布局

用 CSS columns 属性实现，不需要 JavaScript 计算位置：

.gallery {
  columns: 4;          /* 4 列布局 */
  column-gap: 1.25rem; /* 列间距 */
}

.gallery-item {
  break-inside: avoid; /* 防止图片被分割到两列 */
}

好处是浏览器自动处理不同高度的图片排列，响应式时桌面 4 列 → 平板 3 列 → 手机 2 列。

2. 图片懒加载

用浏览器原生的 loading="lazy" 属性：

1	<img src="图片URL" alt="动漫图片" loading="lazy">

浏览器会在图片进入视口前自动开始加载，页面打开速度更快。

3. 随机图片 API

提供两种方式：

方式一：前端 302 跳转（api/random.html）

<script>
  fetch('/images/landscape.txt')
    .then(res => res.text())
    .then(text => {
      const urls = text.split('\n').filter(line => line.trim());
      const randomUrl = urls[Math.floor(Math.random() * urls.length)];
      window.location.href = randomUrl;  // 302 跳转
    });
</script>

方式二：Edge Function 后端（api/random.js）

export default async function (req) {
  const urls = await fetch('...').then(r => r.text());
  const urlList = urls.split('\n').filter(l => l.trim());
  const randomUrl = urlList[Math.floor(Math.random() * urlList.length)];
  
  return Response.redirect(randomUrl, 302);
}

调用方式：

浏览器访问：https://tu.hakimi.de5.net/api/random.html
API 调用：GET https://tu.hakimi.de5.net/api/random
指定类型：GET https://tu.hakimi.de5.net/api/random?type=landscape

4. 樱花动画

用 Canvas 2D 绘制花瓣飘落效果：

class Petal {
  update() {
    this.y += this.speed;                    // 下落
    this.x += Math.sin(this.y * sway) * swayAmount;  // 左右摇摆
    this.rotation += rotationSpeed;          // 旋转
  }
}

性能优化：只保留 30 个花瓣对象，用 requestAnimationFrame 控制帧率，Canvas 比 DOM 动画更流畅。

部署流程

1. EdgeOne Pages 部署

在项目根目录创建 edgeone.json：

{
  "build": {
    "command": "echo 'No build needed'",
    "output": "."
  }
}

2. 绑定自定义域名

在 EdgeOne 控制台绑定域名 tu.hakimi.de5.net，添加 CNAME 记录即可。

3. 推送代码自动部署

1
2
3

git add .
git commit -m "更新图库内容"
git push origin main

EdgeOne Pages 会自动拉取代码并部署。

使用方式

作为图床

在博客、论坛等地方引用图片：

1	<img src="图片URL" alt="动漫图片">

调用随机 API

在你的网站添加随机图片：

1	<img src="https://tu.hakimi.de5.net/api/random.html" alt="随机动漫图片">

集成到博客

我已经在博客的 ACG 页面集成了这个图库，点击即可跳转浏览。

总结

这个项目展示了如何用纯静态技术构建一个功能完整的图库网站：

CSS Columns 实现瀑布流，无需 JS 计算
Canvas 实现樱花动画，性能优秀
纯前端 实现随机 API，零后端成本
EdgeOne Pages 免费部署，全球加速

总成本：0 元（图片使用外部图床，部署使用 EdgeOne 免费版）

如果你对二次元图片感兴趣，欢迎访问 https://tu.hakimi.de5.net 浏览！

GitHub：https://github.com/xxx/xxx
线上：https://tu.hakimi.de5.net

本文为 AI 辅助编写，重写版本

番星的科技记录站