横向瀑布流实现

前几天刚写完竖向瀑布流，就来了个需求需要做个横向定宽的瀑布流，百度一圈也没有发现合适的，只能自己造轮子了！废话不多说，直接贴代码了
项目使用Angular写的，反正也都是大同小异，主要的是思想。

需要定义的配置信息（变量）

  //原始数据
  materialList:any;
  //计算好的图片数组
  calcMaterialList = [];
  //行高度
  imgHeight=145;
  //右边距
  imgRight=8;
  //下边距
  imgBottom=8;
  //容器宽度
  containerWidth = 412;
  //记录当前行高度
  maxWidth:number = 0;
  //记录图片行数
  imgLineNumber = 0;

还需要知道的是图片的原始宽度和高度，这些数据我们后台已经给我们返回了，不知道的可以通过图片预加载的方式取得图片宽和高，放上我们后台返回的图片对象：

[
  {
    fileId: 9550578
    filePath: "//image.tubangzhu.com.cn/updata/201906/27/ad417056dd5a90c7aadb.jpg"
    fileType: 7
    format: "jpeg"
    height: 2513
    id: 50121837
    thumbnail: "//image.tubangzhu.com.cn/updata/201906/27/5568c7d39b0dc697f545.jpeg"
    width: 3932
  }
]

接下来就直接上逻辑了：

//横向瀑布流计算
//data为图片数组
  calcMatrix(data) {
    const {maxWidth,materialList,imgBottom,imgRight,imgHeight,containerWidth} = this;
    let width;
    let height;
    let divWidth;
    if(data.length > 0){
      width = Math.floor(imgHeight/data[0].height*data[0].width);
      //剩余宽度稍小 拉伸图片
      if (width + this.maxWidth > containerWidth-30 && width + this.maxWidth < containerWidth){
        width = containerWidth - this.maxWidth;
        divWidth = width;
        height = Math.floor(width/data[0].width*data[0].height);
        this.maxWidth = 0;
        this.handleMaterialArr(width,height,divWidth,data,false);
        return;
      }
      //超出剩余宽度，但是超出范围不是很大，截取图片
      if(width + this.maxWidth > containerWidth && width * 0.95 + this.maxWidth <= containerWidth){
        height = imgHeight;
        divWidth = containerWidth-this.maxWidth;
        this.maxWidth = 0;
        this.handleMaterialArr(width,height,divWidth,data,false);
        return;
      }
      //超出剩余宽度范围过大（剩余宽度过小），从剩余数据中取一张差不多的
      if(width * 0.95 + this.maxWidth > containerWidth && !data[0].isFirst){
        let index = this.findCloseNum(data,containerWidth-this.maxWidth);
        if (index !== 0){
          let delArr = data.splice(index,1,data[0]);
          data.shift();
          data.unshift(delArr[0]);
          data[0].isFirst = true;
          this.calcMatrix(data);
          return;
        }else{
          data[0].isFirst = true;
          this.calcMatrix(data);
          return;
        }
      }
      //上一步取到的图片还是不合适，根据情况截取或者是拉伸同一行的其他图片
      if(data[0].isFirst) {
        //如果当前行只有一张图片 截取图片
        if(this.maxWidth === 0){
          height = imgHeight;
          divWidth = containerWidth;
          this.handleMaterialArr(width,height,divWidth,data,false);
          return;
        }
        //当前行有多张图片
        //剩余宽度小于图片大小的一半，并且小于100px的时候拉伸当前行的其他图片，当前图片放到下一行
        if (containerWidth-this.maxWidth < width * 0.5 && containerWidth-this.maxWidth < 100){
          //剩余宽度
          let surplusWidth = containerWidth - this.maxWidth + imgRight;
          let ratioNumber = surplusWidth/(this.maxWidth - imgRight);
          this.calcMaterialList[this.calcMaterialList.length-1].isMargin = false;
          for (let i = 0; i < this.calcMaterialList.length;i++){
            //取到当前行的其他图片
            if (this.calcMaterialList[i].imgLineNumber === this.imgLineNumber){
              //根据图片宽度按比例拉伸图片
              let qImgWidth = this.calcMaterialList[i].imgWidth;
              if (this.calcMaterialList[i].isMargin) {
                this.calcMaterialList[i].divWidth += Math.floor((this.calcMaterialList[i].imgWidth + this.imgRight)*ratioNumber);
              }else{
                this.calcMaterialList[i].divWidth += Math.floor(this.calcMaterialList[i].imgWidth*ratioNumber);
              }
              this.calcMaterialList[i].imgWidth = this.calcMaterialList[i].divWidth;
              this.calcMaterialList[i].imgHeight = Math.floor(this.calcMaterialList[i].imgWidth/qImgWidth*this.calcMaterialList[i].imgHeight);
            }
          }
          this.maxWidth = 0;
          this.imgLineNumber++;
          data[0].isFirst = false;
          this.calcMatrix(data);
          return;
        }
        //其他情况都是截取当前行的其他图片，当前图片塞进当前行
        //超出宽度
        let overstepWidth = width - containerWidth + this.maxWidth;
        let isLineWidth = 0;
        for (let i = 0; i < this.calcMaterialList.length;i++){
          //取到当前行的其他图片
          if (this.calcMaterialList[i].imgLineNumber === this.imgLineNumber){
            //根据图片宽度按比例截取图片
            this.calcMaterialList[i].divWidth -= Math.floor(this.calcMaterialList[i].imgWidth/(this.maxWidth+width)*overstepWidth);
            isLineWidth += this.calcMaterialList[i].divWidth;
          }
        }
        divWidth = Math.floor(containerWidth-isLineWidth);
        this.maxWidth = 0;
        this.handleMaterialArr(width,imgHeight,divWidth,data,false);
        return;
      }
      this.maxWidth += Math.floor(width + imgRight);
      this.handleMaterialArr(width,imgHeight,width,data,true);
    }
  }
  handleMaterialArr(width,height,divWidth,arr,isMargin) {
    if (this.maxWidth-width-this.imgRight === 0 || this.containerWidth === width){
      this.imgLineNumber++;
    }
    arr[0].imgWidth = Math.floor(width);
    arr[0].imgHeight = height;
    arr[0].divWidth = Math.floor(divWidth);
    arr[0].imgLineNumber = this.imgLineNumber;
    arr[0].isMargin = isMargin;
    this.calcMaterialList.push(arr[0]);
    arr.shift();
    this.calcMatrix(arr);
  }
  /**
   * 找到与目标最接近的图片
   */
  findCloseNum(arr, num) {
    let index = 0; // 保存最接近数值在数组中的索引
    let d_value = Number.MAX_VALUE; // 保存差值绝对值，默认为最大数值
    if (arr.length === 1) return 0;
    for (let i = 1; i < arr.length; i++) {
      let width = this.imgHeight/arr[i].height*arr[i].width;
      let new_d_value = Math.abs(width - num); // 新差值
      if (new_d_value <= d_value) {
        index = i;
        d_value = new_d_value;
      }
    }
    return index // 返回最接近的图片的索引
  }

代码有点长，有什么不明白的欢迎评论区见~~~~(^▽)