小程序中的瀑布流

.fall {
  display: flex;
  background-color: #f7f7f7;
}

.fall-column {
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
}

.fall-column-item {
  margin-top: 30rpx;
  line-height: 0;
}

.fall-column-item-img {
  width: 330rpx;
}

import api from '../../api/index'
Page({
  data: {
    list: [],
    heightArr: []
  },
  async onLoad () {
    let {results} = await api.fetchImages()
    let col = 2
    for (let i in results) {
      results[i].cover = results[i].imageUrl
      // 获取图片信息
      let info = await this.loadImage(results[i].cover)
      results[i].height = 165 / info.width * info.height
      if (i  {
      wx.getImageInfo({
        src: cover,
        success: (res) => {
          resolve(res)
        }
      })
    })
  }
})

import api from '../../api/index'
Page({
  data: {
    list: [],
    heightArr: []
  },
  async onLoad () {
    let {results} = await api.fetchImages()
    let col = 2
    for (let i = 0; i  {
      wx.getImageInfo({
        src: cover,
        success: (res) => {
          resolve(res)
        }
      })
    })
  }
})

let fetchPicInfo = async (url) => {
  let [err, result] = await to(testFly.get(`${url}?x-oss-process=image/info`))
  if (err) throw err
  return result.data
}

import api from '../../api/index'
Page({
  data: {
    list: [],
    heightArr: []
  },
  async onLoad () {
    let {results} = await api.fetchImages()
    let col = 2
    for (let i = 0; i <p>通过这个方法可以大大减少图片加载的时间，不需要将图片下载到本地在获取图片信息，而是直接向服务器请求图片信息，再加上每次请求只会返回图片基本信息就几个字段，因此请求时间也非常短，如图：<br><img src="https://img.php.cn/upload/image/137/787/730/1592535565112393.png" title="1592535565112393.png" alt="75a59de6d3b987f5baae040cbdb4cfb.png"></p><p>这样用户能更快看到图片显示，同时也加上了图片加载时的过渡效果，这样体验效果会更好</p><h2>总结</h2><p>这篇文章把最近在写小程序时遇到的瀑布流做了一个比较详细的总结，不同的情况下选择不同的加载方案，体验效果最好的当然还是服务端直接返回图片信息，这样能节省很多获取图片信息要花的时间，这样用户体验更优，希望能对各位在写小程序瀑布流能有所帮助。<br><br>如果有错误或不严谨的地方，欢迎批评指正，如果喜欢，欢迎点赞</p><p>推荐教程：《<a href="https://www.php.cn/weixin-marketing.html" target="_blank">微信小程序</a>》</p>