提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

纯css实现简单瀑布流(flex 和 column-count 两种方式)

CSS 实现 简单 方式 两种 Column count flex
2023-09-11 14:22:30 时间

两种实现方式虽然都能实现瀑布流效果，但都有各自的缺点，会有介绍到

方式一：column-count实现

直接复制可预览，可以不做任何修改
这种实现方式的缺点是：图片是先从上到下排列，再从左到右排列的

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		body {
			margin: 4px;
			font-family: Helvetica;
			/* Centering & Limit Width */
			margin: auto;
			width: 720px;
			/*定义一个item-counter初始值为0*/
			counter-reset: item-counter 0;
		}
		
		.masonry {
			column-count: 4;
			column-gap: 0;
		}
		
		.item {
			padding: 2px;
			position: relative;
			/*使item-counter的值+1*/
			counter-increment: item-counter;
		}
		
		.item img {
			display: block;
			width: 100%;
			height: auto;
		}
		
		.item::after {
			position: absolute;
			display: block;
			top: 2px;
			left: 2px;
			width: 24px;
			height: 24px;
			text-align: center;
			line-height: 24px;
			background-color: #000;
			color: #fff;
			/*使用item-counter的值*/
			content: counter(item-counter);
		}
	</style>

	<body>
		<div class="masonry">
			<div class="item">
				<img src="https://picsum.photos/360/460?random=1">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/520?random=2">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/420?random=3">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/420?random=4">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/480?random=5">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/500?random=6">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/500?random=7">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/400?random=8">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/440?random=9">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/420?random=10">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/500?random=11">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/460?random=12">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/480?random=13">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/440?random=14">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/420?random=15">
			</div>
		</div>
	</body>

</html>

方式二：flex布局+巧用order属性实现

这种方式可以做到先从左到右，再从上到下显示
缺点：需要预先设定flex容器的高度，且调整页面大小时会出现一些间距过大的问题

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		body {
			margin: 4px;
			font-family: Helvetica;
			/* Centering & Limit Width */
			margin: auto;
			width: 720px;
		}
		
		.masonry {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			height: 1000px;
		}
		
		.item {
			position: relative;
			width: 25%;
			padding: 2px;
			box-sizing: border-box;
			counter-increment: item-counter;
		}
		
		.item img {
			display: block;
			width: 100%;
			height: auto;
		}
		
		.item::after {
			position: absolute;
			display: block;
			top: 2px;
			left: 2px;
			width: 24px;
			height: 24px;
			text-align: center;
			line-height: 24px;
			background-color: #000;
			color: #fff;
			content: counter(item-counter);
		}
		
		/*巧用order使得排列顺序从左到右，再从上到下*/
		.item:nth-child(4n+1) {
			order: 1;
		}
		
		.item:nth-child(4n+2) {
			order: 2;
		}
		
		.item:nth-child(4n+3) {
			order: 3;
		}
		
		.item:nth-child(4n) {
			order: 4;
		}
	</style>

	<body>
		<div class="masonry">
			<div class="item">
				<img src="https://picsum.photos/360/460?random=1">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/520?random=2">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/420?random=3">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/420?random=4">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/480?random=5">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/500?random=6">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/500?random=7">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/400?random=8">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/440?random=9">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/420?random=10">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/500?random=11">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/460?random=12">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/480?random=13">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/440?random=14">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/420?random=15">
			</div>
		</div>
	</body>

</html>

总结：

以上两种方式，如果不考虑复杂的情况， 直接使用是非常简单，便捷的，两种方式都有各自的优缺点，根据实际情况使用吧

相关文章