纯css制作瀑布流

最新推荐文章于 2024-10-06 20:02:57 发布

玺..

最新推荐文章于 2024-10-06 20:02:57 发布

阅读量200

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/F_mengze/article/details/107009238

版权

前端专栏收录该内容

90 篇文章 1 订阅

订阅专栏

<div class="masonry">
		<div class="item">
			<img src="http://picsum.photos/360/460?random=1" >
		</div>
		<div class="item">
			<img src="http://picsum.photos/360/500?random=1" >
		</div>
		<div class="item">
			<img src="http://picsum.photos/360/420?random=1" >
		</div>
		<div class="item">
			<img src="http://picsum.photos/360/480?random=1" >
		</div>
		<div class="item">
			<img src="http://picsum.photos/360/350?random=1" >
		</div>
		<div class="item">
			<img src="http://picsum.photos/360/420?random=1" >
		</div>
		<div class="item">
			<img src="http://picsum.photos/360/435?random=1" >
		</div>
		<div class="item">
			<img src="http://picsum.photos/360/410?random=1" >
		</div>
		<div class="item">
			<img src="http://picsum.photos/360/460?random=1" >
		</div>
		<div class="item">
			<img src="http://picsum.photos/320/200?random=1" >
		</div>
		<div class="item">
			<img src="http://picsum.photos/360/470?random=1" >
		</div>
		<div class="item">
			<img src="http://picsum.photos/256/456?random=1" >
		</div>
		<div class="item">
			<img src="http://picsum.photos/288/265?random=1" >
		</div>
	</div>

http://picsum.photos/360/460?random=1这是浏览器随机生成的一张图片，360是宽，460是高。

*{
			margin: 4px;
			font-family: helvetica;
			padding: 0;
		}
		.masonry{
			column-count: 4;
			column-gap: 0;
		}
		.item{
			padding: 2px;
			box-sizing: border-box;
			position: relative;
			counter-increment: item-counter;
		}
		.item img{
			display: block;
			width: 100%;
			height: auto;
		}
		.item::after{
			position: absolute;
			display: block;
			top: 0;
			left: 0;
			width: 24px;
			height: 24px;
			background-color: #000;
			line-height: 24px;
			text-align: center;
			color: #fff;
			content: counter(item-counter);
		}

或者是

*{
			margin: 4px;
			padding: 0;
		}
		.masonry{
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			height: 1000px;
		}
		.item img{
			display: block;
			width: 100%;
			height: auto;
		}
		.item{
			width: 25%;
			padding: 2px;
			box-sizing: border-box;
			position: relative;
			counter-increment: item-counter;
		}
		.item::after{
			position: absolute;
			display: block;
			top: 0;
			left: 0;
			width: 24px;
			height: 24px;
			background-color: #000;
			line-height: 24px;
			text-align: center;
			color: #fff;
			content: counter(item-counter);
		}
		.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+4){
			order: 4;
		}