HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" type="text/css" href="waterFallflow.css">
</head>
<body>
<div class="container ">
<div><img src="其他小可爱/5.jpg">
<p>萌萌哒德鲁伊</p></div>
<div><img src="炉石传说小可爱/1.jpg">
<p>其他小可爱</p></div>
<div><img src="其他小可爱/7.jpg">
<p>萌萌哒德鲁伊</p></div>
<div><img src="其他小可爱/9.jpg">
<p>其他小可爱</p></div>
<div><img src="炉石传说小可爱/2.jpg">
<p>萌萌哒德鲁伊</p></div>
<div><img src="其他小可爱/2.jpg">
<p>萌萌哒德鲁伊</p></div>
<div><img src="炉石传说小可爱/3.jpg">
<p>其他小可爱</p></div>
<div><img src="其他小可爱/8.jpg">
<p>萌萌哒德鲁伊</p></div>
<div><img src="炉石传说小可爱/4.jpg">
<p>其他小可爱</p></div>
<div><img src="其他小可爱/6.jpg">
<p>萌萌哒德鲁伊</p></div>
<div><img src="炉石传说小可爱/5.jpg">
<p>其他小可爱</p></div>
<div><img src="其他小可爱/4.jpg">
<p>萌萌哒德鲁伊</p></div>
<div><img src="炉石传说小可爱/6.jpg">
<p>其他小可爱</p></div>
<div><img src="其他小可爱/5.jpg">
<p>萌萌哒德鲁伊</p></div>
<div><img src="炉石传说小可爱/7.jpg">
<p>其他小可爱</p></div>
<div><img src="其他小可爱/3.jpg">
<p>萌萌哒德鲁伊</p></div>
<div><img src="炉石传说小可爱/8.jpg">
<p>其他小可爱</p></div>
<div><img src="其他小可爱/7.jpg">
<p>萌萌哒德鲁伊</p></div>
<div><img src="炉石传说小可爱/9.jpg">
<p>其他小可爱</p></div>
<div><img src="其他小可爱/4.jpg">
<p>萌萌哒德鲁伊</p></div>
</div>
</body>
</html>CSS代码
.container{
column-width: 450px;
column-gap:25px;
}
/*这个控制的是每个分组的宽度，和两组之间的间距*/
.container div{
width: 450px;
margin-top: 15px;
}
/*这个控制图片的宽度，和距离竖行的间距*/
p{
text-align: center;
color: deepskyblue;
}
/*标签的文字位置居中和文字颜色*//效果：
