等高瀑布流和等宽瀑布流

我是一个小稻米

已于 2022-05-16 15:40:17 修改

阅读量449

点赞数 2

分类专栏：前端文章标签： css html css3

于 2022-05-14 20:54:22 首次发布

本文链接：https://blog.csdn.net/weixin_44669966/article/details/124773835

版权

前端专栏收录该内容

49 篇文章 2 订阅

订阅专栏

登高瀑布流实现方式：

<!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%;
}

在这里插入图片描述

我是一个小稻米

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
等高瀑布流和等宽瀑布流

登高瀑布流实现方式：<!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>Doc
复制链接

扫一扫