小程序瀑布流布局

小程序瀑布流布局

实现方案
左右两边是两列，两个数组，用boundingClientRect获取左右的高度，判断下一个应该添加到哪个数组，接口用的豆瓣公共的接口，用scroll-view实现下拉刷新上拉加载更多
wxml文件

<import src="/commponent/cardList2.wxml"></import>
<scroll-view class="list-div" scroll-y="{{true}}" 
bindscrolltolower="handleScrollLower" refresher-enabled="{{true}}" refresher-triggered="{{triggered}}" bindrefresherrefresh="onScrollRefresh">
    <view id="left" class="good-left">
        <block wx:for="{{leftList}}" wx:key="index">
            <template is="cardList2" data="{{item}}"></template>
        </block>
    </view>
    <view id="right" class="good-left">
        <block wx:for="{{rightList}}" wx:key="index">
            <template is="cardList2" data="{{item}}"></template>
        </block>
    </view>
    <view class="more-box">
        <text wx:if="{{!isLoad}}">{{total <= page * limit || total==0?Texts[0]:Texts[1]}}</text>
        <text wx:else>{{Texts[2]}}</text>
    </view>
    <!-- <More style="float:left" page="{{page}}" total="{{total}}" limit="{{limit}}" /> -->
</scroll-view>

js代码片段

const app = getApp()
let leftHeight = 0
let rightHeight = 0
Page({
  data: {
    leftList: [],
    rightList: [],

    isLoad: false,
    page: 1,
    limit: 10,
    total: 0,

    triggered: false,
    Texts: ["没有更多数据了~", "上拉加载更多", "正在加载中..."]
  },

  onLoad () {
    this.getListData()
  },
  //用户下拉动作
  onScrollRefresh () {
    this.setData({
      leftList: [],
      rightList: [],
    }, () => {
      leftHeight = 0
      rightHeight = 0
      this.getListData()
    })
    setTimeout(() => {
      this.setData({
        triggered: false,
      })
    }, 1500);
  },
  handleScrollLower () {
    console.log('scorrll滑到底')
    if (!this.data.isLoad && (this.data.page * this.data.limit < this.data.total)) {
      this.getListData(this.data.page + 1)
    }
  },
  getListData (page = 1) {
    this.setData({
      isLoad: true
    })
    let url = `https://api.wmdb.tv/api/v1/top?type=Imdb&skip=${page}&limit=${this.data.limit}&lang=Cn`
    wx.request({
      url: url,
      data: {},
      header: { 'content-type': 'application/json' },
      method: 'GET',
      success: async (result) => {
        console.log(result)
        if (result.statusCode === 200) {
          let listArr = result.data.map(val => {
            return val.data[0]
          })
          console.log('listArr', listArr)
          let leftList = this.data.leftList
          let rightList = this.data.rightList
          for (let i = 0; i < listArr.length; i++) {
            // debugger
            console.log('this.leftHeight', leftHeight, rightHeight)
            leftHeight <= rightHeight ? leftList.push(listArr[i]) : rightList.push(listArr[i]); //判断两边高度，来觉得添加到那边
            await this.getBoxHeight(leftList, rightList);
          }

          this.setData({
            isLoad: false,
            total: 500,
            page: page + 1
          })
        }
        else {
          this.setData({
            isLoad: false
          })
        }
      },
      fail: (err) => {
        console.log('err', err)
        wx.showToast({
          title: '网络错误',
          icon: 'none',
          duration: 2000
        });
        this.setData({
          isLoad: false
        })  
      },
      complete: () => {

      }
    });
  },
  //获取左右两边高度
  getBoxHeight (leftList, rightList) {
    return new Promise((resolve) => {
      this.setData({
        leftList,
        rightList
      }, async () => {
        let query = wx.createSelectorQuery().in(this)
        // debugger
        query.select('#left').boundingClientRect();
        query.select('#right').boundingClientRect();
        //selectQuery的exec方法后，节点信息会在callback中返回
        query.exec((res) => {
          if (res[0]) {
            leftHeight = res[0].height; //获取左边列表的高度
            rightHeight = res[1].height; //获取右边列表的高度
          }
          resolve();
        });

      })
    })
  }
})

wxml文件

.row-list {
  margin: 20rpx 0 0 20rpx;
  width: calc(50vw - 30rpx);
  background: #ffffff;
  box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(102, 101, 101, 0.5);
  border-radius: 10rpx;
}
.row-list .img-bg {
  width: 100%;
  min-height: 200rpx;
  border-radius: 10rpx 10rpx 0rpx 0rpx;
  box-sizing: border-box;
  padding: 10rpx 0;
}
.row-list .img-bg image {
  width: 90%;
  height: auto;
}
page {
  background: #F5F5F5;
}
.list-div {
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  padding: 10rpx 0;
  overflow: hidden;
}
.list-div .good-left {
  float: left;
}
.more-box {
  float: left;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 10rpx 0 40rpx;
}
.more-box text {
  font-size: 24rpx;
  color: #AAA;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

cardList2模板的wxml文件

<template name="cardList2">
    <view class="row-list">
        <view class="img-bg flex">
            <image mode="widthFix" src="{{item.poster}}" />
        </view>
    </view>
</template>

template 模板引用，不会可以百度下

豆瓣api
小程序片段下载
参考链接