最近在逐渐完善自己的每图小程序,正好用到瀑布流,遂写了一个

前言

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

widthFix:宽度不变,高度自动变化,保持原图宽高比不变。

再配合column-count,分列功能。就可以快速实现瀑布流布局方式啦。

效果图如下

代码如下

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

/*图片本身*/
.item image {
  width: 100%;
}
 <view class="gallery">
    <view class="item" wx:for="{{wallpaper}}" wx:key="{{index}}">
        <image src='{{item.urls}}' mode="widthFix" data-index="{{item.views}}" data-id='{{item.objectId}}' bindtap='previewImg' data-src="{{item.urls}}" />
    </view>
</view>

参靠文章

the end

欢迎扫码使用每图小程序


扫描二维码,在手机上阅读!