效果：
前言：
这个效果几行 css 代码就能搞定，但是其有个缺点是图顺序是从上到下排列再从左到右。没能实现从左到右再从上到下顺序排列。这样不利于最新图片优先显示的原则。所以其只适用在一些简单场景，复杂的瀑布流布局还是得用 js 实现。
实现：
1. 定义标签，main是底层盒子，.item里放图片，这里用了12张图：
<main>
<div class="item">
<img src="https://picsum.photos/360/460?random=1" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/400/460?random=2" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/370/450?random=3" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/370/460?random=4" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/390/410?random=5" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/380/440?random=6" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/560/560?random=7" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/460/360?random=8" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/360/460?random=9" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/380/490?random=10" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/300/460?random=11" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/560/460?random=12" alt="">
</div>
</main>
img 里的 src=“https://picsum.photos/560/460?random=12” ，输入这个网址能随机获得一张图片，要在其里面指定宽高，如我是560*460的。
2. 定义 main 样式，实现瀑布流布局：
main{
column-count: 5;
column-gap: 0;
}
column-count: 5; 规定元素应该被划分的列数。我这分为5列。
column-gap: 0; 规定列间的间隔的像素。我这是 0 。
3. 定义 .item 和图片的样式，不设置 .item的宽高，让子元素图片撑开：
.item{
margin: 2px;
position: relative;
counter-increment: bianhao;
}
.item img{
width: 100%;
}
counter-increment: xxx; 这个属性是设置某个选取器每次出现的计数器增量。默认增量是 1。 我设置12个 .item，所以一共有12个数。
以上就实现了瀑布流的简单效果了。
*4. 定义图片右上角的数字顺序：
.item::after{
content: counter(bianhao);
position: absolute;
top: 0px;
right: 0px;
width: 20px;
height: 20px;
background-color: black;
line-height: 20px;
text-align: center;
font-size: 12px;
color: white;
border-bottom-left-radius: 50%;
}
content: counter(bianhao); 文本为设定计数器内容。跟 item 里的counter-increment: bianhao;对应了。
position: absolute;
top: 0px;
right: 0px;
width: 20px;
height: 20px; 绝对定位在右上角。
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
main{
column-count: 5;
column-gap: 0;
}
.item{
margin: 2px;
position: relative;
counter-increment: bianhao;
}
.item img{
width: 100%;
}
.item::after{
content: counter(bianhao);
position: absolute;
top: 0px;
right: 0px;
width: 20px;
height: 20px;
background-color: black;
line-height: 20px;
text-align: center;
font-size: 12px;
color: white;
border-bottom-left-radius: 50%;
}
</style>
</head>
<body>
<main>
<div class="item">
<img src="https://picsum.photos/360/460?random=1" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/400/460?random=2" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/370/450?random=3" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/370/460?random=4" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/390/410?random=5" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/380/440?random=6" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/560/560?random=7" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/460/360?random=8" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/360/460?random=9" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/380/490?random=10" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/300/460?random=11" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/560/460?random=12" alt="">
</div>
</main>
</body>
</html>
总结：
主要是以下两个属性的应用。
column-count 属性。
column-gap 属性。
次要可以了解：
counter-increment 属性。
content: counter(xxx)；