通常在移动端列表页面常用到瀑布流布局

比如商品列表  直播列表等 

昨天在公众号 前端大全 看到一篇文章，讲的是小程序瀑布流布局，文中使用了js计算定位item在list中的位置，私以为此方式太过繁琐，麻烦且消耗性能。

分享下本人在项目中使用瀑布流的实现方式

首先来了解下CSS属性之 column-count

这个属性可以将元素划分成多列比如 column-count:2就是划分成2列 后面的数字为列数

再来看column-gap  

这个属性是每列的间距比如column-gap:20px;每列间距20px

接着是break-inside

break-inside: avoid;这个可以避免在元素内部断行并产生新的列

dom结构

<view class="room_list">

    

    <view class="room_item">

        具体的图文内容

    <view>


<view>


下面来看代码 

/* 房间列表 */
	.room_list{
		padding: 32rpx;
		column-count:2;
		column-gap: 26rpx;
	}
	.room_item{
		width: 330rpx;
		padding-bottom: 20rpx;
		break-inside: avoid;
		
	}




具体效果如下图



瀑布流就是如此简单 三个属性搞定