小編給大家分享一下Ionic3如何實現(xiàn)圖片瀑布流布局，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)2013年開創(chuàng)至今，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都做網(wǎng)站、網(wǎng)站建設網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元新密做網(wǎng)站,已為上家服務,為新密各地企業(yè)和個人服務,聯(lián)系電話:028-86922220

首先創(chuàng)建一個項目，這里不多做介紹。我們用about這個模塊來進行瀑布流的開發(fā)。

這里先介紹一下實現(xiàn)的流程：

我們先要定義一個container，在container中存在有多個box，box里面放置圖片。

1、首先獲取container中的所有box。

2、獲取box的寬度和屏幕的寬度。

3、獲取在當前屏幕寬度下一行可以放置多少個box。

4、將所有的box的高度放到一個數(shù)組當中。

5、遍歷數(shù)組，獲取到第一行中最高度最小的box。

6、遍歷數(shù)組的下標到達第二行的時候將第二排的首元素放在第一行的高度最低的元素下面。（比如一行放了三個box，其中第三個高度最低，那么第四個就放在第三個box的下面。）

7、將元素放在最低元素下面后，則將第三個元素和第四個元素高度相加成為一個新的第三個元素，同樣重復即可實現(xiàn)。

下面是詳細代碼

about.html

<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>

about.scss

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

about.ts

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); //獲得一排擺的個數(shù) 用Math.floor()轉換為整數(shù)
  parentNode.style.cssText = "width:" + childWidth * num + "px; margin:0 auto"; //固定container的寬并設置居中
  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)頁的滾動監(jiān)聽實現(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é)點
   divNode.className = "box";//為節(jié)點添加box類名
   parentNode.appendChild(divNode);//添加根元素
   let subDivNode = document.createElement("div");//創(chuàng)建節(jié)點
   subDivNode.className = "box_img";//為節(jié)點添加類名
   divNode.appendChild(subDivNode);//添加根元素
   var img = document.createElement("img");//創(chuàng)建節(jié)點
   img.src = this.img_data[i].src;//圖片加載路徑
   subDivNode.appendChild(img);//添加根元素
  }
  this.getNode();
  setTimeout(() => { infiniteScroll.complete() }, 1000);
 }
}

最終效果：

以上是“Ionic3如何實現(xiàn)圖片瀑布流布局”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：Ionic3如何實現(xiàn)圖片瀑布流布局
當前鏈接：http://jinyejixie.com/article0/jpdjoo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、云服務器、搜索引擎優(yōu)化、網(wǎng)站排名、、移動網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)