angular+ionic写瀑布流布局（仿小红书）

项目需求：
1.用angular+ionic实现瀑布流布局
2.实现下拉无限加载

流程：
定义一个container，在container中存在多个box，box里面放置图片还有内容
1.首先获取container中的所有box。
2.获取box的宽度和屏幕的宽度。
3.获取在当前屏幕宽度可以放置多少个box。
4.将所有的box的高度放到一个数组里面。
5.遍历数组，获取到第一行个高度最小的box。
6.遍历数组的下标到第二行1的时候将第二排的第一个元素放在第一行高度最低的元素下面。以此类推
7.下拉刷新将数据重新追加到数组中。

详细代码
list.html

<ion-content>
<div id="container">
            <div class="box" *ngFor="let image of img_data">
                <div class="box_img">
                    <img [src]="image.src">
                    <p class="boxP">{{image.text}}</p>
                    <div class="footlist">
                        <img src="https://img.xiaohongshu.com/avatar/5d73bd3ea37f280001363066.jpg@80w_80h_90q_1e_1c_1x.jpg" alt="">
                        <span>嘻嘻</span>
                        <i class="iconfont icon-aixin">10</i>
                    </div>
                </div>
            </div>
        </div>
        <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
            <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="正在加载..." position="bottom">
            </ion-infinite-scroll-content>
        </ion-infinite-scroll>
</ion-content>

list.scss

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

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

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

.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;
}

.boxP {
    line-height: 20px;
    font-size: 15px;
    margin: 2px 5px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.footlist {
    display: flex;
    flex-direction: row;
    position: relative;
    padding: 5px;
}

.footlist>img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    justify-self: center;
}

.footlist span {
    font-size: 14px;
    margin-left: 5px;
}

.footlist i {
    position: absolute;
    right: 5px;
}

.none {
    height: 80px;
    width: 100%;
    background-color: red;
}

list.ts

import { Component,  Inject, ViewChild } from '@angular/core';
import { ConferenceData } from '../../providers/conference-data';
import { Platform ,NavController } from '@ionic/angular';
import { DOCUMENT} from '@angular/common';

@Component({      
  selector: 'page-map',
  templateUrl: 'map.html',
  styleUrls: ['./map.scss']
})
export class MapPage { 
  img_data = [{
    src: "http://ci.xiaohongshu.com/5c1e9505-b77a-09e7-e81b-a1631d2fe24c?imageView2/2/w/540/format/jpg",
    text:"初见人间芙蓉色"
  }, {
    src: "//ci.xiaohongshu.com/2f5b8f7f-083c-433d-b787-8354d6a8cc75?imageView2/2/w/540/format/jpg",
    text:"预期年起森林苏打气泡水"
  },{
    src: "//ci.xiaohongshu.com/3eb309f0-7430-163f-9f33-5e7d2dd803b6?imageView2/2/w/1080/format/jpg/q/75",
    text:"双十一购物清单家具"
  },{
    src: "//ci.xiaohongshu.com/f14b1fed-120f-0741-32ef-3ec02c448643?imageView2/2/w/1080/format/jpg/q/75",
    text:"哇哦，又到了少女心的时刻"
  },{
    src: "//ci.xiaohongshu.com/f260fe66-4e7a-05ce-02f5-6ac509147991?imageView2/2/w/1080/format/jpg/q/75",
    text:"小鱼儿杀青了"
  },{
    src: "//ci.xiaohongshu.com/c66916dd-8f86-e393-d925-8c6dac8ad597?imageView2/2/w/1080/format/jpg/q/75",
    text:"教程"
  },{
    src: "//ci.xiaohongshu.com/e73b22b0-a437-3cf3-b41f-356a254ec98a?imageView2/2/w/540/format/jpg",
    text:"上海欢乐谷"
  },{
    src: "//ci.xiaohongshu.com/abba97a2-c55e-3921-9851-13609d62e9b8?imageView2/2/w/1080/format/jpg/q/75",
    text:"初见人间芙蓉色"
  }]
  constructor(
    @Inject(DOCUMENT) private doc: Document,
    public confData: ConferenceData,
    public platform: Platform,
    public navCtrl: NavController
    ) {}

    ngAfterViewInit() {

    }
    ionViewWillEnter() {
      this.getNode();
    }

    getNode() {
      let parentNode = document.getElementById("container");
      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高度
        }
      }
    }
    getMinHeight(imgHeightArray, minHeight) {
      for (var i in imgHeightArray) {
        if (imgHeightArray[i] == minHeight) { //循环所有数组的高度 让它等于最小图片的高度 返回i值
          return i;
        }
      }
    }
  //这里是借助ionic的上拉加载代替网页的滚动监听实现加载更多
    doInfinite(infiniteScroll) {
      setTimeout(() => {
        console.log('到底了')
         infiniteScroll.target.complete();
        this.img_data.push({
          src: "https://ci.xiaohongshu.com/131b2b30-b536-3078-95ad-8922300a62bf?imageView2/2/w/540/format/jpg",
          text:"初见人间芙蓉色"
        })
        this.img_data.push({
          src: "//ci.xiaohongshu.com/e73b22b0-a437-3cf3-b41f-356a254ec98a?imageView2/2/w/540/format/jpg",
          text:"初见人间芙蓉色"
        })
        this.img_data.push({
          src: "//ci.xiaohongshu.com/c66916dd-8f86-e393-d925-8c6dac8ad597?imageView2/2/w/1080/format/jpg/q/75",
          text:"初见人间芙蓉色"
        })
        this.img_data.push({
          src: "http://ci.xiaohongshu.com/5c1e9505-b77a-09e7-e81b-a1631d2fe24c?imageView2/2/w/540/format/jpg",
          text:"初见人间芙蓉色"
        })
        setTimeout(()=>{
          this.getNode();
        },1)
        }, 500);
    }
}

效果图如下：

收工。如有bug，欢迎评论区指正！