星河一方折腾 | 图片瀑布流
本文解决的是博客多图展示占用空间大、排版不够相册化的问题：在不引入复杂组件的前提下，用 Hugo 内容组织配合 CSS 多列布局，让照片在文章和相册页面里以瀑布流形式展示。
适用场景
适合需要在 Hugo 文章中集中展示多张照片、游记配图或作品集的页面。它的目标不是做完整图片管理系统，而是用尽量轻量的样式，让图片阅读更紧凑、更美观。
核心步骤
最近在给一系列博文配图，随着添加的图片多了之后，一直想实现的「图片瀑布流」的心思又活络起来了。Google 大法好，最终找到了图片瀑布流折腾记、Hugo 多图排版这样来 这两篇文章，两种不同的方法都很简单，都可以实现我想要的效果，感恩！
目前我主要在网站的两个地方进行应用，第一种是在文章中大量展示自己拍的照片时达到类似相册效果，这样既美观又省网页空间；另一种是专门的「回忆」页面，不断添加我自己拍的较为满意的照片，相当于照片画廊。
目前对网站图片进行了以下操作：
- 圆角处理：
border-radius: 5px; - 阴影效果：
box-shadow: 0px 0px 5px rgba(0,0,0,0.3); - 滑过放大：
img:hover和transform的纯 CSS 方案 - 多图排版：
column-count和p:has(> img:nth-child)的纯 CSS 方案
最终效果
小结
最终方案倾向于纯 CSS 实现，优点是简单、无需额外 JavaScript，和 Hugo 原本的 Markdown 图片写法也比较兼容；取舍是瀑布流控制能力不如专门图库组件精细。后续可以继续优化懒加载、移动端列数和图片说明文字，让相册页面在性能和可读性之间更平衡。
参考资料
（2023-12-16@广州）
