3天搞定相册app实战项目，告别文档迷失

官方文档翻了三遍还是头大？别急，这很正常。很多转岗做前端的伙伴都卡在这一步，觉得资料太杂，抓不住重点。其实，做一个简单的相册app，就是最好的实战项目切入点。

今天不讲虚的，直接带你用原生 JavaScript 和 CSS Grid 撸一个能跑的相册应用。咱们不依赖重型框架，目的是让你看清底层逻辑。做完这个，你再回头看官方文档，思路瞬间就通了。

概念速懂：相册app到底在做什么？

很多人以为相册app就是放图片，其实核心是“网格布局”与“数据渲染”。

从前端视角看，它包含三个核心模块：

数据源：图片URL列表，通常来自后端API或本地JSON。
视图层：利用 CSS Grid 或 Flexbox 实现瀑布流或固定网格。
交互层：点击放大、懒加载、筛选分类。

为什么推荐新手从这个入手？因为它涵盖了 DOM 操作、事件监听、异步数据获取、CSS 布局四大基本功。比起复杂的 CRUD 系统，相册app 更直观，成就感来得更快。

很多教程喜欢一上来就套 Vue 或 React，但对于理解浏览器机制来说，原生代码更纯粹。你要明白，框架只是封装，核心还是 DOM 和 CSS。

环境准备：极简起步，拒绝过度配置

做这个实战项目，你只需要：

一个文本编辑器（VS Code 推荐）。
一个现代浏览器（Chrome 或 Edge）。
一张本地 HTML 文件。

不需要 Node.js，不需要 npm install。为什么？因为对于入门者，每一步的依赖都增加认知负担。直接写 HTML+CSS+JS，打开即运行，报错一目了然。

目录结构建议：

album-app/
├── index.html
├── style.css
├── script.js
└── assets/└── images/ (存放测试图片)

如果你的图片来自网上，记得处理跨域问题。但在本地开发阶段，建议先用 assets/images 下的本地图片，避免被 CORS 策略卡住心态。

核心语法：CSS Grid 是布局灵魂

相册的核心难点在于“整齐”。传统用 Float 或 Flex 做网格，遇到不同高度图片很容易错位。CSS Grid 完美解决这个问题。

关键代码片段：

.gallery {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 16px;padding: 20px;
}.gallery-item {position: relative;overflow: hidden;border-radius: 8px;cursor: pointer;transition: transform 0.3s ease;
}.gallery-item:hover {transform: scale(1.05);
}.gallery-item img {width: 100%;height: 200px;object-fit: cover;display: block;
}

逐行拆解：

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))：这是核心。意思是自动填充列，每列最小 200px，最大占满剩余空间。这样无论屏幕多宽，都能自适应，不用写媒体查询。
object-fit: cover：保证图片填满容器且不变形，这是做图片墙必用属性。
transition：增加交互质感，鼠标悬停时有放大效果。

很多新手会问，为什么不用 Flex？Flex 适合一维布局，Grid 适合二维。相册是典型的二维网格，Grid 是降维打击。参考 MDN Web Docs 官方文档，Grid 的浏览器支持率已经接近 100%，放心用。

完整代码示例：从零到可运行

下面是一段完整的、可直接运行的代码。把它复制到你的 script.js 中，配合上面的 HTML 和 CSS 即可看到效果。

HTML 结构 (index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My Album App</title><link rel="stylesheet" href="style.css">
</head>
<body><header><h1>我的相册</h1><select id="filter-select"><option value="all">全部</option><option value="nature">风景</option><option value="city">城市</option></select></header><main><div class="gallery" id="gallery"><!-- 图片将通过 JS 动态插入 --></div></main><!-- 模态框：用于放大查看 --><div class="modal" id="modal"><span class="close-btn" id="close-modal">&times;</span><img src="" alt="放大图片" id="modal-img"></div><script src="script.js"></script>
</body>
</html>

JavaScript 逻辑 (script.js):

// 1. 模拟后端数据
const photoData = [{ id: 1, src: 'assets/images/nature1.jpg', category: 'nature', alt: '山川' },{ id: 2, src: 'assets/images/city1.jpg', category: 'city', alt: '高楼' },{ id: 3, src: 'assets/images/nature2.jpg', category: 'nature', alt: '湖泊' },{ id: 4, src: 'assets/images/city2.jpg', category: 'city', alt: '街道' },// 实际项目中，这里应该 fetch 接口数据
];const gallery = document.getElementById('gallery');
const modal = document.getElementById('modal');
const modalImg = document.getElementById('modal-img');
const closeBtn = document.getElementById('close-modal');
const filterSelect = document.getElementById('filter-select');// 2. 渲染函数
function renderPhotos(category = 'all') {// 清空容器gallery.innerHTML = '';// 过滤数据const filteredPhotos = category === 'all' ? photoData : photoData.filter(p => p.category === category);// 遍历并创建 DOMfilteredPhotos.forEach(photo => {const item = document.createElement('div');item.className = 'gallery-item';item.dataset.id = photo.id;const img = document.createElement('img');img.src = photo.src;img.alt = photo.alt;// 懒加载优化：loading="lazy"img.loading = 'lazy';// 点击事件：打开模态框item.addEventListener('click', () => {modalImg.src = photo.src;modal.classList.add('active');});item.appendChild(img);gallery.appendChild(item);});
}// 3. 筛选功能
filterSelect.addEventListener('change', (e) => {renderPhotos(e.target.value);
});// 4. 模态框关闭逻辑
closeBtn.addEventListener('click', () => {modal.classList.remove('active');
});// 点击背景关闭
modal.addEventListener('click', (e) => {if (e.target === modal) {modal.classList.remove('active');}
});// 初始化渲染
renderPhotos();

代码亮点解析：