纯CSS实现瀑布流布局

最新推荐文章于 2024-08-01 15:19:04 发布

The wind is blowing

最新推荐文章于 2024-08-01 15:19:04 发布

阅读量246

点赞数 1

分类专栏： CSS 文章标签： CSS瀑布流纯CSS瀑布流瀑布流瀑布流布局简单的瀑布流布局

本文链接：https://blog.csdn.net/qq_43156398/article/details/95046413

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

小程序交流群：609690978

先上图，要分几列进行瀑布流可自定义：
在这里插入图片描述

上代码：

<div class="box">
	<div class="box-item" v-for="(item,index) in imgList" :key="index">
		<img src="item">
	</div>
</div>

重点来了，就这么几行CSS：

			.box{
				-moz-column-count:3;
				-webkit-column-count:3;
				-ms-column-count:3 ;
				column-count: 3; // 设置显示2列
				column-gap: 2px; //设置或检索对象的列与列之间的间隙为2px
				width: 100%;
				&-item{ //less语法，&承接父级元素的class类
					width: 95%;
					background: #fefefe;
					border: 2px solid #fcfcfc;
					box-shadow: 0px 2px 2px rgba(34, 25, 25, 0.4);
					margin: 5px 2px 2px 2px;
					padding: 1px;
					transition: opacity .4s ease-in-out; // 检索或设置对象变换时的过渡
					display: inline-block;
					img{
						width: 100% !important;
						display:block;
					}
				}
			}