瀑布流布局其核心是基于一个网格的布局，而且每行包含的项目列表高度是随机的（随着自己内容动态变化高度），同时每个项目列表呈堆栈形式排列，最为关键的是，堆栈之间彼此之间没有多余的间距差存大。
代码比较简单：
<!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>
* {
margin: 0;
}
.pu {
margin: 0 auto;
column-count: 5; /*分为5列 自己设置*/
column- 300px; /*设置列宽,即是每列的宽度*/
column-gap: 10px; /*每列和每行的间距为10px 是 column-gap: 10px; row-gap: 10px; 的缩写*/
}
.inner {
break-inside: avoid; /*避免分隔符分开图片*/
margin-bottom: 10px;
}
img {
100%;
}
</style>
</head>
<body>
<div class="pu">
<p class="inner"> <img src="1.webp" alt=""> </p>
<p class="inner"> <img src="1.webp" alt=""> </p>
<p class="inner"> <img src="1.webp" alt=""> </p>
<p class="inner"> <img src="2.webp" alt=""> </p>
<p class="inner"> <img src="2.webp" alt=""> </p>
<p class="inner"> <img src="2.webp" alt=""> </p>
<p class="inner"> <img src="2.webp" alt=""> </p>
<p class="inner"> <img src="2.webp" alt=""> </p>
<p class="inner"> <img src="1.webp" alt=""> </p>
<p class="inner"> <img src="1.webp" alt=""> </p>
<p class="inner"> <img src="2.webp" alt=""> </p>
<p class="inner"> <img src="2.webp" alt=""> </p>
<p class="inner"> <img src="2.webp" alt=""> </p>
<p class="inner"> <img src="2.webp" alt=""> </p>
<p class="inner"> <img src="3.webp" alt=""> </p>
<p class="inner"> <img src="3.webp" alt=""> </p>
<p class="inner"> <img src="3.webp" alt=""> </p>
<p class="inner"> <img src="3.webp" alt=""> </p>
<p class="inner"> <img src="3.webp" alt=""> </p>
<p class="inner"> <img src="3.webp" alt=""> </p>
<p class="inner"> <img src="3.webp" alt=""> </p>
<p class="inner"> <img src="3.webp" alt=""> </p>
<p class="inner"> <img src="3.webp" alt=""> </p>
<p class="inner"> <img src="3.webp" alt=""> </p>
<p class="inner"> <img src="3.webp" alt=""> </p>
<p class="inner"> <img src="3.webp" alt=""> </p>
<p class="inner"> <img src="4.webp" alt=""> </p>
<p class="inner"> <img src="4.webp" alt=""> </p>
<p class="inner"> <img src="4.webp" alt=""> </p>
<p class="inner"> <img src="4.webp" alt=""> </p>
<p class="inner"> <img src="4.webp" alt=""> </p>
<p class="inner"> <img src="4.webp" alt=""> </p>
<p class="inner"> <img src="4.webp" alt=""> </p>
<p class="inner"> <img src="4.webp" alt=""> </p>
<p class="inner"> <img src="4.webp" alt=""> </p>
<p class="inner"> <img src="4.webp" alt=""> </p>
<p class="inner"> <img src="4.webp" alt=""> </p>
<p class="inner"> <img src="6.webp" alt=""> </p>
<p class="inner"> <img src="6.webp" alt=""> </p>
<p class="inner"> <img src="6.webp" alt=""> </p>
<p class="inner"> <img src="6.webp" alt=""> </p>
<p class="inner"> <img src="6.webp" alt=""> </p>
<p class="inner"> <img src="6.webp" alt=""> </p>
<p class="inner"> <img src="12.webp" alt=""> </p>
<p class="inner"> <img src="12.webp" alt=""> </p>
<p class="inner"> <img src="12.webp" alt=""> </p>
<p class="inner"> <img src="12.webp" alt=""> </p>
<p class="inner"> <img src="6.webp" alt=""> </p>
<p class="inner"> <img src="11.webp" alt=""> </p>
<p class="inner"> <img src="11.webp" alt=""> </p>
<p class="inner"> <img src="11.webp" alt=""> </p>
<p class="inner"> <img src="11.webp" alt=""> </p>
<p class="inner"> <img src="11.webp" alt=""> </p>
<p class="inner"> <img src="11.webp" alt=""> </p>
<p class="inner"> <img src="11.webp" alt=""> </p>
<p class="inner"> <img src="11.webp" alt=""> </p>
<p class="inner"> <img src="12.webp" alt=""> </p>
<p class="inner"> <img src="12.webp" alt=""> </p>
<p class="inner"> <img src="12.webp" alt=""> </p>
<p class="inner"> <img src="12.webp" alt=""> </p>
<p class="inner"> <img src="12.webp" alt=""> </p>
</div>
</body>
</html>
当然也可以用flex 布局，不过使用flex会比较麻烦。