前端摄影

把照片放进瀑布流

1 分钟阅读

CSS columns 一行实现瀑布流，配合懒加载与图注格式的统一。

方幅老城砖墙与藤影光斑

图片库不需要 JS 网格库，columns 就是天然的瀑布流。

最小实现

.gallery-grid {
  columns: 4 240px;
  column-gap: 16px;
}
.gallery-grid .figure {
  break-inside: avoid;
}

懒加载与图注

原生 loading="lazy" 覆盖九成场景，图注统一成「〔图 01〕说明 — 地点/年份」，全站一致才有杂志感。