Ionic3實(shí)現(xiàn)圖片瀑布流布局

<ion-content>
 <div id="container">
 <div class="box" *ngFor="let image of img_data">
 <div class="box_img">
 ![]({{image.src}})
 </div>
 </div>
 </div>
 <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
 <ion-infinite-scroll-content loadingSpinner="circles" loadingText="正在加載...">
 </ion-infinite-scroll-content>
 </ion-infinite-scroll>
</ion-content>

page-about {
 ion-content {
 #container {
 position: relative;
 .box {
 padding: 5px;
 float: left;
 .box_img {
  padding: 5px;
  border: 1px solid #cccccc;
  box-shadow: 0 0 5px #ccc;
  border-radius: 5px;
  img {
  width: 150px!important;
  height: auto;
  }
 }
 }
 }
 }
}

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';
@IonicPage({
 name: 'about'
})
@Component({
 selector: 'page-about',
 templateUrl: 'about.html'
})
export class AboutPage {
 img_data = [{
 src: "assets/images/a.jpg"
 }, {
 src: "assets/images/b.jpg"
 }, {
 src: "assets/images/c.jpg"
 }, {
 src: "assets/images/d.jpg"
 }, {
 src: "assets/images/e.jpg"
 }, {
 src: "assets/images/f.jpg"
 }, {
 src: "assets/images/g.jpg"
 }, {
 src: "assets/images/h.jpg"
 }, {
 src: "assets/images/i.jpg"
 }, {
 src: "assets/images/j.jpg"
 }, {
 src: "assets/images/k.jpg"
 }, {
 src: "assets/images/l.jpg"
 }, {
 src: "assets/images/m.jpg"
 }, {
 src: "assets/images/n.jpg"
 }, {
 src: "assets/images/o.jpg"
 }]
 constructor(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 childWidth = childNodeArray[0].offsetWidth;
 let num = Math.floor(screenWidth / childWidth); //獲得一排擺的個(gè)數(shù) 用Math.floor()轉(zhuǎn)換為整數(shù)
 parentNode.style.cssText = "width:" + childWidth * num + "px; margin:0 auto"; //固定container的寬并設(shè)置居中
 this.setImagePosition(num, childNodeArray);
 }

 setImagePosition(num, childArray) {
 var imgHeightArray = [];//定義數(shù)組用于存放所有圖片的高度
 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); //函數(shù)獲得高度最小的圖片的位置
 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) { //循環(huán)所有數(shù)組的高度 讓它等于最小圖片的高度 返回i值
 return i;
 }
 }
 }
//這里是借助ionic的上拉加載代替網(wǎng)頁的滾動(dòng)監(jiān)聽實(shí)現(xiàn)加載更多
 doInfinite(infiniteScroll) {
 let parentNode = document.getElementById("container");
 for (var i = 0; i < this.img_data.length; i++) {
 let divNode = document.createElement("div"); //創(chuàng)建div節(jié)點(diǎn)
 divNode.className = "box";//為節(jié)點(diǎn)添加box類名
 parentNode.appendChild(divNode);//添加根元素
 let subDivNode = document.createElement("div");//創(chuàng)建節(jié)點(diǎn)
 subDivNode.className = "box_img";//為節(jié)點(diǎn)添加類名
 divNode.appendChild(subDivNode);//添加根元素
 var img = document.createElement("img");//創(chuàng)建節(jié)點(diǎn)
 img.src = this.img_data[i].src;//圖片加載路徑
 subDivNode.appendChild(img);//添加根元素
 }
 this.getNode();
 setTimeout(() => { infiniteScroll.complete() }, 1000);
 }
}