瀑布流图片的简单实现

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

HTML

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

CSS

css
div {
/*在容器内设置栏数*/
column-count: n;
/*垂直间距*/
column-gap: 0;
/*在间隔中加点线*/
column-rule: dotted;
}
img {
/*防止单个元素分栏*/
break-inside: avoid;
}

元素是从上到下竖直排列的1 https://simpleweblearning.s3.us-west-2.amazonaws.com/2021/01/07220125/direction.png

%sveltekit.body%