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

最新推荐文章于 2024-10-06 10:52:50 发布

codingWeb

最新推荐文章于 2024-10-06 10:52:50 发布

阅读量3.5k

点赞数 2

分类专栏：前端 css html

本文链接：https://blog.csdn.net/fesfsefgs/article/details/105873328

版权

本文介绍了两种纯CSS实现瀑布流布局的方法：一是利用`column-count`属性，二是采用`flex`布局结合`order`属性。每种方式都有其特点，第一种直接实现，而第二种能实现从左到右、从上到下的显示效果。在不涉及复杂场景的情况下，这两种方法都提供了简单快捷的解决方案。

摘要由CSDN通过智能技术生成

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

方式一：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="htt