Urara-Blog/urara/2022-12-12-waterfall/+page.md

title	created	summary	tags
瀑布流图片的简单实现	2022-10-16	Simple implementation of a waterfall flow picture	CSS

瀑布流图片又被称为 Masonry Layout, Waterfall Layout

HTML

<div>
  <img />
  <img />
  <img />
  <img />
</div>

CSS

div {
  /*在上层元素设置栏数*/
  column-count: n;

  /*垂直间距*/
  column-gap: 0;

  /*在间隔中加点线*/
  column-rule: dotted;
}

img {
  /*防止单个元素分栏*/
  break-inside: avoid;
}

元素是从上到下竖直排列的¹

---

1. Masonry (Waterfall) Layout with Pure CSS ↩︎