ionic -angular 瀑布流

html

 <!-- 瀑布流方式-->
    <div id="container" [ngClass]="list.length>0?'show':'hide'">
        <div class="box" *ngFor="let item of list" (click)="goDetail(item)">
            <div class="box_img">
                <img src="assets/img/IMG_20190921_174133.jpg" class="im">
                <ion-badge slot="start" *ngIf="item.status" class="badge">已标识</ion-badge>
                <ion-badge slot="start" *ngIf="!item.status" class="badge">未标识</ion-badge>
                <div style="margin: 4px 2px; text-align:center;font-size: 13px; color: #368ab5;">
                    <div style="width: 32%;display:inline-block;"><label class="titlecs">品类数</label></div>
                    <div style="width: 32%;display:inline-block;"><label class="titlecs">店家数</label></div>
                    <div style="width: 32%;display:inline-block;"><label class="titlecs">品牌数</label></div>
                </div>
                <div style="margin: 4px 2px;padding-bottom: 2px; text-align:center;font-size: 14px; color: #917d5b;">
                    <label style="display:inline-block; width: 32%;text-align: center; ">{{item.caseNum}}</label>
                    <label style="display:inline-block;width: 32%; text-align: center; ">{{item.shopkeeperNum}}</label>
                    <label style="display:inline-block;width: 32%; text-align: center; ">{{item.brandNum}}</label>
                </div>
            </div>
        </div>
    </div>
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
        <ion-infinite-scroll-content loadingSpinner="bubbles " style="color: black;" [loadingText]="loadText" position="bottom ">
        </ion-infinite-scroll-content>
    </ion-infinite-scroll>

    <!-- 骨架框-->
    <div>
        <div id="containerSke" [ngClass]="loading && list.length==0?'show':'hide'">
            <div class="box" *ngFor="let i of [160,186,175,170,160,180,165]">
                <div class="box_img">
                    <div style="width: 94%;display: inline-block; margin: 8px;">
                        <ion-skeleton-text [animated]="true" [style]="'height:'+i+'px;border-radius: 3px;'"></ion-skeleton-text>
                    </div>
                    <div style="margin: 6px 6px;padding-bottom: 2px; text-align:center;font-size: 13px; color: #917d5b;">
                        <label><ion-skeleton-text [animated]="true" style="width: 100%; height: 16px; margin-bottom: 8px;border-radius: 3px;"></ion-skeleton-text></label>
                        <label><ion-skeleton-text [animated]="true" style="display:block;width: 88%;margin-bottom: 8px;height: 16px;border-radius: 3px;"></ion-skeleton-text></label>
                    </div>
                </div>
            </div>
        </div>
    </div>

css

// 瀑布流 样式
#container {
    position: relative;
    display: inline-block;
}

#containerSke {
    position: relative;
    display: inline-block;
}

.box {
    padding: 4px;
    float: left;
    margin: 0 auto;
}

.box_img {
    width: 177.5px;
    border: 1px solid #cccccc;
    box-shadow: 0 0 5px #ccc;
    // border-radius: 10px;
    position: relative;
}

.box_img>img {
    width: 100%;
    height: auto;
    overflow: hidden;
    // border-radius: 8px 8px 0 0;
}

ion-infinite-scroll {
    width: 100%;
    position: fixed;
    z-index: 99;
    bottom: 0;
}

.titlecs {
    display: inline-block;
    // width: 32%;
    text-align: center;
    background-color: #b3ddf3;
    border-radius: 3px;
    padding: 0px 3px;
}

.badge {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 6px 10px;
    font-size: 14px;
    --background: #37a484;
    --color: white;
    font-weight: normal;
    border-radius: 0px;
}

.hide {
    visibility: hidden;
}

.show {
    visibility: visible;
}

ts

export class RecordComponent implements OnInit, AfterViewChecked {
  list: any = [];
  loading = false;
  search: string;
  pageSize = 2;//时间个数，2表示2天的数据
  pageIndex = 0;
  skip = 0;
  isEnd = false;
  loadText = '正在加载...';
  timer;
  constructor(
    private router: Router,
    private service: RecordService,
    private alertControll: AlertController,
    private el: ElementRef
  ) { }

  ngAfterViewChecked(): void {
    // let parentNode = document.getElementById("container");
    // this.getNode(parentNode);
  }

  ngOnInit() {
    this.getRecodrds(null);
  }
  //#region 瀑布流
  ionViewWillEnter() {
    //加载骨架框
    let parentNode = document.getElementById("containerSke");
    this.getNode(parentNode);
  }
  getNode(parentNode) {
    // let parentNode = document.getElementById("container");
    if (parentNode != undefined) {
      let childNodeArray: any = parentNode.getElementsByClassName("box");
      let screenWidth = document.documentElement.clientWidth;
      let boxImg: any = document.querySelectorAll(".box_img");
      let loding = document.querySelector("ion-infinite-scroll");
      let childWidth = screenWidth / 2;
      // console.log(`屏幕的宽` + screenWidth)
      // console.log(`box的宽` + childWidth)
      let num = Math.floor(screenWidth / childWidth); //获得一排摆的个数 用Math.floor()转换为整数
      parentNode.style.cssText = "width:" + childWidth * num + "px; margin:0 auto; height:auto"; //固定container的宽并设置居中
      for (var i = 0; i < boxImg.length; i++) {
        boxImg[i].style.cssText = "width:" + (childWidth - 10) + "px";
      }
      this.setImagePosition(num, childNodeArray);
    }
  }
  setImagePosition(num, childArray) {
    var imgHeightArray = [];//定义数组用于存放所有图片的高度
    for (var i = 0; i < childArray.length; i++) { //遍历所有图片
      if (i < num) {
        imgHeightArray[i] = childArray[i].offsetHeight; //取得第一排图片的高度
      } else {
        var minHeight = Math.min.apply(null, imgHeightArray); //获取存放图片中高度最小的图片
        var minIndex = this.getMinHeight(imgHeightArray, minHeight); //函数获得高度最小的图片的位置
        childArray[i].style.position = "absolute"; //绝对定位图片
        childArray[i].style.top = minHeight + "px"; //图片距顶部像素
        childArray[i].style.left = childArray[minIndex].offsetLeft + "px"; //图片距左的像素
        imgHeightArray[minIndex] = imgHeightArray[minIndex] + childArray[i].offsetHeight; //将最低高度的box的高度加上它下方（新一个图片）的box高度
      }
    }
  }
  /**
   * 获取等于minHeight值的元素的数组位置index
   * @param minHeight
   * @returns
   */
  getMinHeight(imgHeightArray, minHeight) {
    for (var i in imgHeightArray) {
      if (imgHeightArray[i] == minHeight) { //循环所有数组的高度 让它等于最小图片的高度 返回i值
        return i;
      }
    }
  }


  /**
   * 判断图片元素是否加载完成，完成之后再加载瀑布流模式（解决瀑布流图片重叠的问题）
   */
  isImageLoad() {
    //所有的图片元素
    var imgEls = this.el.nativeElement.querySelectorAll('.im');
    // 判断所有的图片元素是否加载完成
    if (imgEls.length == this.list.length) {
      //删除定时器
      clearTimeout(this.timer);
      let parentNode = document.getElementById("container");
      this.getNode(parentNode);
    } else {
      this.timer = setTimeout(() => {
        this.isImageLoad()
      }, 100);
    }
  }

  //这里是借助ionic的上拉加载代替网页的滚动监听实现加载更多
  doInfinite(infiniteScroll) {
    this.loadText = '正在加载...';
    this.getRecodrds(infiniteScroll);
  }
  //#endregion


  getRecodrds(infiniteScroll) {
    this.loading = true;
    this.skip = this.pageIndex * this.pageSize;
    this.service.getPictureRecords({ skip: this.skip, size: this.pageSize })
      .pipe(
        finalize(() => {
          this.loading = false;
          if (infiniteScroll) {
            if (this.isEnd) {
              console.log('到底啦')
              this.loadText = '到底啦';
            }
            infiniteScroll.target.complete();
          }
        })
      )
      .subscribe(result => {
        if (result.length > 0) {
          var datas: any = [];
          datas = this.list;
          datas.push(...result);
          this.list = datas;
          this.pageIndex++;
          this.isEnd = false;
          this.isImageLoad()
        } else {
          this.isEnd = true;
        }
      })
  }
}

效果：

骨架框                                                                                结果