原来用纯css做瀑布流是这么easy

摘要: 一行代码搞定瀑布流

效果

对比

这在没有css3是比较费力的，计算图片的高度，分别做汇总，一会儿往左丢一个，一会儿往右丢一个，使得左右高度相近

现在只有一个属性搞定column-count: n;其中n代表所需要的列数，其他就跟正常的一样写就可以了

核心CSS代码

/*画廊整体*/
.gallery {
/*定义列数*/
column-count: 2;
/*列间距*/
column-gap: 4px;
}

/*图片本身*/
.gallery-item image {
width: 100%;
}

Dom结构

<view class="gallery">
<view class="gallery-item" wx:for="{{images}}" wx:key="">
<image src="{{item}}" mode="widthFix" />
</view>
</view>

其中widthFix是一个了不起的属性，之前我做灵动云商城时，微信小程序还没有这个属性，也模拟实现了，是通过getImageInfo变相实现的。

但自从用上了widthFix后，做高度自适应，就是飞一般的感觉了。

一点小tip，以记。