微信小程序实现瀑布流

加载到后端的数据

设置我们需要的属性，这里我们需要leftList、rightList、leftHeight、rightHeight

遍历数组，通过wx.getImageInfo获取到每个元素图片的宽度高度（需要配置download的域名）

判断这个元素应该被放在左边还是右边（放在数组高度低的一边）

处理完数据之后，把数据设置到data上

在前端展示这些数据（图片需要加上mode="widthFix",宽度固定，高度自适应，保持宽高比）

js代码

import {
  getPostsList
} from "../../API/user"

// pages/chatroomList/chatroomList.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [],
    leftList: [],
    rightList: [],
    leftHeight: 0,
    rightHeight: 0,
    // 整体数据是否处理完成
    finish: false,
    // 所有数据加载完成
    isEnd: false,
  },
  pageNum: 1,
  pagesize: 10,
  goroom(e){
    let ur= e.currentTarget.dataset.id
    console.log( e);
    console.log( e.currentTarget);
    console.log( e.currentTarget.dataset);
    console.log( e.currentTarget.dataset.id);
    wx.navigateTo({
      url: `/pages/chatroom/chatroom?id=${ur}`,
    })
  },
  // 处理数据
  initList(list) {
    this.data.finish = false
    // 临界值
    if (list.length == 0) {
      this.data.finish = true
      return
    }
    let item = list.shift()
    wx.getImageInfo({
      src: item.coverImgUrl,
      success: (res) => {
        if (this.data.leftHeight <= this.data.rightHeight) {
          // 放到左边列表
          this.data.leftList.push(item)
          // 记录高度变化
          this.data.leftHeight += res.height / res.width
        } else {
          // 放到左边列表
          this.data.rightList.push(item)
          // 记录高度变化
          this.data.rightHeight += res.height / res.width
        }
        // 更改视图
        this.setData({
          leftList: this.data.leftList,
          rightList: this.data.rightList,
        })
      },
      complete: () => {
        this.initList(list)
      }
    })
    // }

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    getPostsList(this.pageNum, this.pagesize).then(res => {
      // 处理数据
      this.initList(res.data.rows)
    })
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.data.isEnd = false
    if (this.data.finish) {
      this.pageNum = 1
      this.setData({
        leftList: [],
        rightList: [],
        leftHeight: 0,
        rightHeight: 0
      })
      getPostsList(1, this.pagesize).then(res => {
        console.log(res);
        // 处理数据
        this.initList(res.data.rows)
      })
    } else {
      return
    }

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    console.log("触底了");
    if (this.data.finish) {
      if (!this.data.isEnd) {
        // 页码加1 ，重新请求
        this.pageNum++
        getPostsList(this.pageNum, this.pagesize).then(res => {
          if (this.pageNum*this.pagesize >= res.data.total) {
            console.log("最后一页");
            // 处理数据
            this.initList(res.data.rows)
            this.setData({
              isEnd: true
            })
          } else {
            // 处理数据
            this.initList(res.data.rows)
          }
        })
      }
    }

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

接口

function request(options) {
  // 请求拦截器
  //  ...
  // 1. 加一些统一的参数，或者配置
  if (!options.url.startsWith("https://") && !options.url.startsWith("http://")) {
    options.url = "https://showme2.myhope365.com" + options.url
  }
	// 默认的请求头
  let header = {
     // 加上统一的cookie
     "cookie": wx.getStorageSync("cookie") || "",
    "content-type": "application/x-www-form-urlencoded",
  };
  if (options.header) {
    header = {
      ...header,
      ...options.header
    }
  }

  return new Promise((reslove, reject) => {
    // 调用接口
    wx.request({
      // 默认的配置
      // 加载传入的配置
      ...options,
      header,
      success(res) {
        // 响应拦截器，所有接口获取数据之前，都会先执行这里
        //  1. 统一的错误处理
        if (res.statusCode != 200) {
          wx.showToast({
            title: '服务器异常，请联系管理员',
          })
        }

        reslove(res)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

export function get(url, options = {}) {
  return request({
    url,
    ...options
  })
}

export function post(url, data, options = {}) {
  return request({
    url,
    data,
    method: "POST",
    ...options
  })
}



//聊天室瀑布流
export function getPostsList(pageNum=1,pageSize=10,title=""){
  return post("/api/bbs/bbsPosts/open/list",{
    // categoryId:1,
    pageNum,
    pageSize,
    title 
  })
}

h5

<!--pages/chathome/chathome.wxml-->
<view class="box">
  <view class="left">
    <image wx:for="{{leftList}}"  bindtap="goroom"  data-id="{{item.postsId}}" mode="widthFix" src="{{item.coverImgUrl}}"></image>
  </view>
  <view class="right" >
    <image wx:for="{{rightList}}"  bindtap="goroom"  data-id="{{item.postsId}}" mode="widthFix" src="{{item.coverImgUrl}}"></image>
  </view>
</view>

<view wx:if="{{isEnd}}"> 到底了 </view>