小程序快速实现瀑布流布局
今天插播一则微信小程序的tips
小程序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
欢迎关注，转发～
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2017-09-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
