微信小程序瀑布式布局

瀑布式布局又叫流式布局也叫百分比布局

分为三个列表

总列表list

leftList和rightList

wxml内的代码为

<view class="box">
    <view class="left">
        <view bindtap="toDeatil" data-id="{{item.postsId}}" class=" fly" wx:for="{{leftList}}" wx:key="index">
        <view>
            <image mode='widthFix' src="{{item.coverImgUrl}}"></image>
            <view class="van-ellipsis" style="text-align: center;">
            {{item.title}}<van-icon name="chat-o" />
            </view>
        </view>
    </view>
    </view>
    <view class="right">
        <view bindtap="toDeatil" data-id="{{item.postsId}}" class="fly" wx:for="{{rightList}}" wx:key="index">
        <image mode='widthFix' src="{{item.coverImgUrl}}"></image>
        <view class="van-ellipsis" style="text-align: center;">
        {{item.title}}<van-icon name="chat-o" />
        </view>
    </view>
    </view>
</view>

在wx.js中写入

Page({

data: {
        list:[],
        leftList:[],
        rightList:[],
        leftHeight: 0,
        rightHeight: 0,
    },
getlist(){//自定方法
        if(this.data.list.length == 0){
            // console.log(this.data.leftList);
            return
        }
        let item = this.data.list.shift()
        // console.log(item);
        wx.getImageInfo({//获取图片的高度对比
          src: item.coverImgUrl,
          success:(res)=>{
              if(this.data.leftHeight > this.data.rightHeight){
                  this.data.rightList.push(item)
                  this.data.rightHeight += res.height/res.width
              }else{
                    this.data.leftList.push(item)
                    this.data.leftHeight += res.height/res.width
              }
          },
          
          complete:()=>{
            //   console.log(this.data.leftList);
            //   console.log(this.data.rightList);
              this.setData({
                  leftList:this.data.leftList,
                  rightList:this.data.rightList
              })
          }
        })
        // console.log(this.data.leftList);
        this.getlist()
        
    },
 onLoad: function (options) {
        getPost(this.pageNum,10).then(res=>{//getPost为封装的请求接口
            console.log(res);
            this.setData({
                list:res.data.rows
            })
            this.data.list = res.data.rows
            // console.log(this.data.list);
            this.getlist()//在生命函数内调用getlist方法
        })
        
    },

})

就是给list列表分类如果left高度大于right高度则放在right列表内反之相同

在用wxss给两个盒子样式