小程序瀑布流布局

花了一周空闲时间撸了一个小程序 先上图😁

1.瀑布流布局(目前是两列的)

 * 构建 left right 两个view 及 dataArray
 * 图片在当前屏幕的高度
 * 计算图片的宽高比 (图片url地址带w=xx&h=xx)
 * 对比左右总高度 进行数据的分配
 

1-1:获取图片在的当前屏幕的宽度

wx.getSystemInfo({
     success: (res) => {
        let ww = res.windowWidth;
        let imgWidth = ww * 0.46;
        that.setData({
          imgWidth: imgWidth
        });
        that.getCardTemplateList(true)
      }
   })

1-2:处理返回的数据

let leftH = that.data.leftH
let rightH = that.data.rightH
 for (const key in list) {
        let item = list[key]
        let array = item.pic.split("?")
        if (array.length > 1){
          let sizeStr = array[1]
          let sizeArray = sizeStr.split("&");
          if (sizeArray.length > 1){
            let hStr = sizeArray[1]
            let wStr = sizeArray[0]
            let hArray = hStr.split('=')
            let wArray = wStr.split('=')
            if(hArray.length > 1 && wArray.length > 1){
              item.imageHeight = parseFloat(hArray[1]) / parseFloat(wArray[1]) * that.data.imgWidth
            }else{
              item.imageHeight = 0
            }
          }
        }
        
        if(leftH <= rightH){
          leftH += item.imageHeigh
          leftArray.push(item)
        }else{
          rightH += item.imageHeigh
          rightArray.push(item)
        }
      }

2.效果图