登高瀑布流实现方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
.content {
display: flex;
flex-wrap: wrap;
padding: 5px;
}
/* 如果最后一行的图片不够填满整行, 那么就让添加的这个元素填充剩余区域*/
.content::after {
content: '';
flex-grow: 99999;
}
.content>div{
/* 在一行中自动去填充剩余区域 */
flex-grow: 1;
margin: 5px;
height: 200px;
}
.content>div>img{
height: 100%;
min-width: 100%;
}
</style>
<body>
<div class="content">
<div><img src="C:\Users\HP\Pictures\Camera Roll\0.jpg"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\1.jpg"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\2.jpg"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\3.jpg"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\4.webp"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\5.webp"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\6.webp"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\7.webp"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\8.webp"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\9.webp"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\10.webp"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\11.webp"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\12.jpg"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\13.jpg"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\14.jpg"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\15.jpg"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\16.jpg"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\17.jpg"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\18.jpg"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\19.webp"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\20.jpg"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\21.jpg"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\22.jpg"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\23.jpg"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\24.jpg"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\25.jpg"></div>
<div><img src="C:\Users\HP\Pictures\Camera Roll\26.jpg"></div>
</div>
</body>
<script>
</script>
</html>
等宽瀑布流实现方式:
其他代码同上,这里只写css部分
*{
padding: 0;
margin: 0;
}
.content {
padding: 10px;
/* 分栏数目 */
columns: 5;
/* 分栏间隙 */
column-gap: 10px;
}
.content>div, .content>div>img{
width: 100%;
height: 100%;
}