web实战-网页相册展示
https://github.com/liwuyou/HTML.git
项目结构
1
2
3
4
5
6
7
| PhotoShow/
├── assets/
│ ├── images/ # 图片资源
│ └── backgrounds/ # 背景图片
├── index.html # 主页面
├── style.css # 样式文件
└── script.js # 交互逻辑
|
实现思路
图片加载
- 使用fetch API动态获取assets/images目录下的图片资源
- 通过DOMParser解析目录结构，提取图片路径
- 自动生成图片网格布局
图片展示
- 使用CSS Grid布局实现响应式图片网格
- 图片容器保持1:1比例，使用object-fit: cover保持图片比例
- 添加hover缩放效果提升交互体验
图片查看
- 实现模态框查看大图功能
- 支持左右箭头切换图片
- 点击背景或关闭按钮关闭模态框
缩放功能
- 实现图片区域缩放控制
- 支持放大、缩小、重置操作
- 缩放时动态调整网格列数和间距
- 添加平滑过渡效果
关键代码
图片加载
1
2
3
4
5
6
7
8
9
| async function getImagePaths() {
const response = await fetch('assets/images/');
const text = await response.text();
const parser = new DOMParser();
const html = parser.parseFromString(text, 'text/html');
return Array.from(html.querySelectorAll('a'))
.map(a => a.href)
.filter(href => /\.(jpg|jpeg|png|gif)$/i.test(href));
}
|
缩放控制
1
2
3
4
5
6
7
8
9
10
11
12
13
| function updateGalleryScale() {
gallery.style.transform = `scale(${currentScale})`;
gallery.style.transformOrigin = 'top left';
const baseColumns = Math.floor(window.innerWidth / 200);
const adjustedColumns = Math.max(1, Math.floor(baseColumns / currentScale));
gallery.style.gridTemplateColumns = `repeat(${adjustedColumns}, minmax(200px, 1fr))`;
const spacing = 16 * currentScale;
gallery.style.gap = `${spacing}px`;
gallery.style.padding = `${spacing}px`;
}
|
样式要点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| .gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
padding: 16px;
transition: all 0.3s ease;
}
.image-container {
aspect-ratio: 1;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
|
使用说明
- 将图片放入assets/images目录
- 打开index.html即可查看相册
- 使用右下角按钮控制缩放
- 点击图片查看大图，使用左右箭头切换
