这篇文章演示了所有可用的画廊布局效果。
使用方法
在 Markdown 文章中使用 ```gallery 代码块：
```gallerylayout=布局名称
```布局展示
1. Split（分栏对比）
用法：左右对比展示，支持自定义比例
```gallerylayout=split split-ratio=1:1
```可选参数：
split-ratio=1:1- 等比（默认）split-ratio=1:2- 左小右大split-ratio=2:1- 左大右小
示例：1:1 等比对比
示例：1:2 左小右大
示例：2:1 左大右小
2. Magazine（杂志封面）
用法：主图 + 小图网格排列
```gallerylayout=magazine hero-ratio=2:1 bottom-columns=3
```可选参数：
hero-ratio=2:1- 主图比例（默认 2:1）hero-ratio=16:9- 超宽主图hero-ratio=3:2- 中等宽度bottom-columns=3- 小图列数（默认 3）bottom-columns=2- 2 列排列bottom-columns=4- 4 列密集排列
示例：默认配置（2:1 主图 + 3 列小图）
示例：16:9 超宽主图 + 2 列小图
示例：3:2 主图 + 4 列密集排列
3. Pyramid（金字塔）
用法：1-2-3 递增排列，固定 6 张图
```gallerylayout=pyramid
```说明：
- 必须提供 6 张图片
- 第 1 张：顶部居中
- 第 2-3 张：中间一行
- 第 4-6 张：底部一行
示例：
4. Spotlight（聚光灯）
用法：中心大图 + 四角小图，固定 5 张图
```gallerylayout=spotlight
```说明：
- 必须提供 5 张图片
- 第 1 张：中心位置，较大且突出
- 第 2-5 张：四个角落
示例：
5. Overlap（层叠卡片）
用法：扑克牌式层叠效果
```gallerylayout=overlap
```说明：
- 每张图向右下偏移 30px
- 后面的图层级更低
- 适合展示版本迭代、设计稿对比
示例：
6. Carousel（轮播）✨ NEW
用法：JS 交互式轮播画廊
```gallerylayout=carousel
```功能特性：
- ✅ 左右导航按钮
- ✅ 底部圆点指示器
- ✅ 图片计数器（1 / 4）
- ✅ 自动播放控制（每 3 秒切换）
- ✅ 触摸/拖拽滑动支持
- ✅ 键盘导航（← → 箭头键）
- ✅ 响应式设计
示例：基础轮播（3 张图）
示例：多图轮播（8 张图 + 自动播放演示）
总结
以上展示了 6 种不同的画廊布局，可以根据内容类型选择合适的展示方式。新增的 Carousel 轮播布局提供了完整的交互体验，适合需要逐张展示的场景。
新增布局 - Phase 3
7. Timeline（时间轴）
用法：左侧时间线 + 右侧图片，适合叙事场景
```gallerylayout=timeline
```说明：
- 左侧显示时间/事件标签
- 图片按时间顺序纵向排列
- 有时间线视觉效果
- 适合项目进展、旅行日记
示例：
8. Curtain（窗帘对比）
用法：Before/After 拖拽对比，固定 2 张图
```gallerylayout=curtain
```说明：
- 必须提供 2 张图片
- 拖拽分隔线对比两张图
- 点击快速跳转
- 适合前后对比场景
示例：
布局总结
现在共有 8 种特色画廊布局 + 6 种基础布局 = 14 种布局：
| 布局 | 特点 | 适用场景 |
|---|---|---|
| Timeline | 时间轴叙事 | 项目进展、旅行日记 |
| Curtain | 拖拽对比 | Before/After 对比 |
| Carousel | 轮播交互 | 产品展示、作品集 |
| Split | 左右对比 | 新旧版本对比 |
| Magazine | 杂志封面 | 主次关系展示 |
| Pyramid | 金字塔 | 递进式展示 |
| Spotlight | 聚光灯 | 中心突出 |
| Overlap | 层叠卡片 | 版本迭代 |
选择合适的布局，让你的内容更具表现力！
---
## 布局总结
现在共有 **9 种画廊布局** + **6 种原有布局** = **15 种布局**：
| 布局 | 特点 | 适用场景 ||------|------|----------|| **Timeline** | 时间轴叙事 | 项目进展、旅行日记 || **Hexagon** | 蜂窝网格 | 科技产品、创意展示 || **Curtain** | 拖拽对比 | Before/After 对比 || Carousel | 轮播交互 | 产品展示、作品集 || Split | 左右对比 | 新旧版本对比 || Magazine | 杂志封面 | 主次关系展示 || Pyramid | 金字塔 | 递进式展示 || Spotlight | 聚光灯 | 中心突出 || Overlap | 层叠卡片 | 版本迭代 |
选择合适的布局，让你的内容更具表现力！
评论
GitHub 登录后可评论。
评论区会在滚动到这里时自动加载。