小程序Taro瀑布流

PS 本例使用Taro和TaroUI
Demo：https://github.com/Noelia1997/waterfall-com-taro

效果：

image-20200622203911231.png

这两天试了很多种做瀑布流布局的方法，第一种是用flex布局，这种方法只能整齐的排列大小相同的图片，不能做到瀑布流的效果。

image-20200622204437537.png

第二种是根据序号的奇偶来选择是放在左边还是右边，但是如果某列一直放很长的图片，依旧无法达到瀑布流的效果。

image-20200622204537939.png

在网上进行了搜索，找到了微信小程序的瀑布流demo，逻辑有点混乱，阅读不够流畅。

但是通过阅读作者的相关代码，知道了两件事。

一是：微信小程序<image/>中有一个属性bindload，对应在Taro中是onLoad。

image-20200622204901564.png

注意这个属性是在图片载入完毕时得到参数的！并且最坑的是如果循环渲染Image的话，如下面：

            goodsList.map((item, index) => {
              return (
                <Image onLoad={this.onImageLoad} id={index} src={item.image}></Image>
              )
            })

它在循环结束以后把所有的图片根据图片的大小排序，小的先执行它的bindload，大的得等等，如果图片的大小相等，随机选择，无语。下图是每次调用onLoad打印出的id数据，可以看出是随机且无序的。

image-20200622215902529.png

为了让每次load图片时获得有序的数组，我们不对第一次渲染图片的组件进行操作。所以在上方的代码外面包裹一层display:none

        <View style={{display: 'none'}}>
          {
            goodsList.map((item, index) => {
              return (
                <Image onLoad={this.onImageLoad} id={index} src={item.image}></Image>
              )
            })
          }
        </View>

这里的例子里有两个列表，goodsList保存的是初始的数据，此数组中无height，我们要通过onImageLoad获得图片的height，把获得height后保存的数据放到ImageLoadList中。

onImageLoad = (e) => {
    //如果不做计算这一步，图片在进入左列或者右列时可能会出现计算错误。
    let oImgW = e.detail.width;         //图片原始宽度
    let oImgH = e.detail.height;        //图片原始高度
    let imgWidth = this.state.imgWidth;  //图片设置的宽度
    let scale = imgWidth / oImgW;        //比例计算
    let imgHeight = oImgH * scale;      //自适应高度

    //初始化ImageLoadList数据
    ImageLoadList.push({
      id: parseInt(e.currentTarget.id),
      height: imgHeight,
    })
    //载入全部的图片进入ImageLoadList数组，若数量和goodsList中相同，进入图片排序函数
    if (ImageLoadList.length === goodsList.length) {
      this.handleImageLoad(ImageLoadList)
    }
    // console.log(ImageLoadList)
  }

二是：制作瀑布流布局需要判断左右列表的高度

以下是对ImageLoadList进行操作的函数：


handleImageLoad = (ImageLoadList) => {
    //对无序的列表进行冒泡排序
    for (let i = 0; i < ImageLoadList.length - 1; i++)
      for (let j = 0; j < ImageLoadList.length - i - 1; j++) {
        if (ImageLoadList[j].id > ImageLoadList[j + 1].id) {
          let temp = ImageLoadList[j]
          ImageLoadList[j] = ImageLoadList[j + 1]
          ImageLoadList[j + 1] = temp
        }
      }
    //现在的列表在goodList的基础上，多了height属性
    console.log('ImageLoadList', ImageLoadList);
    //为现在的列表添加value值 
    for (let i = 0; i < goodsList.length; i++) {
        //把原数组中的属性赋予ImageLoadList数组
      ImageLoadList[i].value = goodsList[i].value
      ImageLoadList[i].image = goodsList[i].image
      console.log('ImageLoadList[i].height', ImageLoadList[i].height)
      ImageLoadList[i].imgStyle = {height: ImageLoadList[i].height + 'rpx'}

    }
    console.log('ImageLoadList', ImageLoadList);
    //对现在的列表进行操作
    let leftHeight = 0;  //左边列表的高度
    let rightHeight = 0;
    let left = []  //左边列表的数组
    let right = []
    //遍历数组
    for (let i = 0; i < ImageLoadList.length; i++) {
      console.log('左边的高度', leftHeight, '右边边的高度', rightHeight)
      if (leftHeight <= rightHeight) {
        console.log('第', i + 1, '张放左边了')
        left.push(ImageLoadList[i])
        leftHeight += ImageLoadList[i].height
        console.log('left', left);
      } else {
        console.log('第', i + 1, '张放右边了')
        right.push(ImageLoadList[i])
        rightHeight += ImageLoadList[i].height
        console.log('right', right);
      }
    }
    this.setState({
      goodsRight: right,
      goodsLeft: left
    }, () => {
      console.log(this.state);
    })
}

另外使用React框架的push有一个坑，我们不能对state进行push，例如

this.state.goodsRight.push(imgObj)  //× 错误写法

//正确写法
let array = []
array.push(imgObj)
this.setState({
    goodsRight : array 
})

render()

<ScrollView>
          {
            <View className={'goods-left'}>
              {
                goodsLeft.map((item, index) => {
                  return (
                    <View className={'goods-item'}>
                      <Image src={item.image} className={'goods-img'} style={item.imgStyle} id={index}
                             mode='widthFix'/>
                      <View className={'goods-name'}>{item.value}</View>
                    </View>
                  )
                })
              }
            </View>
          }
        </ScrollView>

        <ScrollView>
          {
            <View className={'goods-right'}>
              {
                goodsRight.map((item, index) => {
                  return (
                    <View className={'goods-item'}>
                      <Image src={item.image} className={'goods-img'} style={item.imgStyle} id={index}
                             mode='widthFix'/>
                      <View className={'goods-name'}>{item.value}</View>
                    </View>
                  )
                })
              }
            </View>
          }
        </ScrollView>

Taro 瀑布流组件