小程序快速实现瀑布流布局

小程序image组件里有一个高度自适应的mode:

widthFix:

宽度不变，高度自动变化，保持原图宽高比不变。

配合column-count，分列功能。

就可以快速实现瀑布流布局方式啦。

代码如下：

//css

.gallery {
/*定义列数*/
column-count: 2;
/*列间距*/
column-gap: 8rpx;
}

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

//Dom结构
<view class="gallery">
<view class="item" wx:for="{{images}}">
<image src="{{item}}" mode="widthFix" />
</view>
</view>

---

---

本公众号定期更新关于

设计师、程序员发挥创意

互相融合的指南、作品。

主要技术栈：

nodejs、react native、electron

Elasticsearch