通常在移动端列表页面常用到瀑布流布局
比如商品列表 直播列表等
昨天在公众号 前端大全 看到一篇文章,讲的是小程序瀑布流布局,文中使用了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;
}
具体效果如下图

瀑布流就是如此简单 三个属性搞定
发表评论 取消回复