小程序瀑布流布局

源码地址https://gitee.com/httpchc320321/waterfallFlow.git
效果图

中心句

首先固定2列的容器，然后将图片根据容器高度动态分配进这两列中

1.固定2列的容器,在容器中加载分配的图片

.box{
    float: left;
    width: 48%;
    margin: 0 1%;
}
.imgBox{
    width: 100%;
    margin: 1% 0;
}

<view class='box'>
    <image class="imgBox" wx:for="{{imgLeft}}" wx:key="{{index}}" mode="widthFix" src='{{item}}'>image>
view>
<view class='box'>
    <image class="imgBox" wx:for="{{imgRight}}" wx:key="{{index}}" mode="widthFix" src='{{item}}'>image>
view>

先来介绍下image的mode=”widthFix”属性,设置mode=”widthFix”可以保持原图宽高比不变

mode=”widthFix”:宽度不变，高度自动变化，保持原图宽高比不变

如果不设置mode=”widthFix”的话图片的显示都是等高的,瀑布流就变成小河流了~~

2.然后将图片根据容器高度动态分配进容器中
根据容器高度分配

容器高度=容器内图片高度总和

容器内图片高度???

如何获取加载的图片的宽高呢???

image的bindload属性

所以在分配之前我们就要先获取所有图片宽高属性

<image class="imgBox " bindload="imgLoad" wx:for="{{imgList}}" mode="widthFix" src='{{item}}' >image>

Page({
    data: {
        imgList: [
            '../../images/2.jpeg',
            '../../images/4.jpeg',
            '../../images/1.jpeg',
            '../../images/5.jpeg',
            '../../images/7.jpeg'
        ]
    },
    imgLoad: function(e) {
        //图片原始宽度
        let beforeWidth = e.detail.width; 
        //图片原始高度
        let beforeHeight = e.detail.height;
    }
})

在拿到图片原始宽高后
计算原始宽高和当前显示宽高比

原始图片的高度在bindload中得到的都是350,宽度是图片原始宽度,而且图片显示的宽度是相对设备固定的为设备宽的48%(48%是样式设置的)

所以图片显示的宽度=设备宽度*0.48

图片原始宽度 和图片显示的宽度比例为

比例=图片原始宽度 / 图片显示的宽度

so

图片显示的高度=图片原始高度 / 比例

那左右容器该如何分配呢?

当左区域高=右区域高 或 当左区域高<右区域高时将图片分配到左区域

当左区域高>右区域高 时将图片分配到右区域

贴一份比较全的代码
wxml

<image class="imgBox " bindload="imgLoad" wx:for="{{imgList}}" wx:key="{{index}}" mode="widthFix" data-url="{{item}}" data-index="{{index}}" src='{{item}}' >image>
<view class='box'>
    <image class="imgBox" wx:for="{{imgLeft}}" wx:key="{{index}}" mode="widthFix" src='{{item}}'>image>
view>
<view class='box'>
    <image class="imgBox" wx:for="{{imgRight}}" wx:key="{{index}}" mode="widthFix" src='{{item}}'>image>
view>

wxss

.box{
    float: left;
    width: 48%;
    margin: 0 1%;
}
.imgBox{
    width: 100%;
    margin: 1% 0;
}

js

var leftImg = [];//左容器图片
var rightImg = [];//右容器图片
Page({
    data: {
        imgList: [
            '../../images/2.jpeg',
            '../../images/4.jpeg',
            '../../images/1.jpeg',
            '../../images/5.jpeg',
            '../../images/7.jpeg',
            '../../images/6.jpeg',
            '../../images/8.jpeg',
            '../../images/3.jpeg',
            '../../images/9.jpeg',
            '../../images/10.jpeg',
            '../../images/11.jpeg'
        ],
        imgLeft: [],//左容器图片
        imgRight: [],//右容器图片
        lHeight: 0,//左容器高
        rHeight: 0,//右容器高
        imgWidth: 0,//图片宽
    },
    imgLoad: function(e) {
        //图片原始宽度
        let beforeWidth = e.detail.width; 
        //图片原始高度
        let beforeHeight = e.detail.height; 
        //图片显示的宽度
        let nowWidth = this.data.imgWidth; 
        //比例=图片原始宽度/图片显示的宽度
        let wProportion = beforeWidth / nowWidth;
        //图片显示的高度=图片原始高度/比例
        let imgHeight = beforeHeight / wProportion;

        //当左区域高=右区域高   或   当左区域高<右区域高
        if (this.data.lHeight == this.data.rHeight || this.data.lHeight < this.data.rHeight) {
            leftImg.push(e.target.dataset.url)
            this.setData({
                lHeight: this.data.lHeight + imgHeight
            })
        //当左区域高>右区域高
        } else if (this.data.lHeight > this.data.rHeight) {
            rightImg.push(e.target.dataset.url)
            this.setData({
                rHeight: this.data.rHeight + imgHeight
            })
        }
        //当完成最后一次分组时        
        if (e.target.dataset.index == this.data.imgList.length - 1) {
            this.setData({
                imgLeft: leftImg,
                imgRight: rightImg,
                imgList: []
            })
        }
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        var that = this;
        //获取设备参数
        wx.getSystemInfo({
            success: function(res) {
                that.setData({
                    imgWidth: res.windowWidth * 0.48,
                })
            },
        })
    },
    onReady: function() {},
    onShow: function() {},
    onHide: function() {},
    onUnload: function() {},
    onPullDownRefresh: function() {},
    onReachBottom: function() {},
    onShareAppMessage: function() {

    }
})