小編給大家分享一下Ionic3如何實(shí)現(xiàn)圖片瀑布流布局,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
宜興網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,宜興網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為宜興上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢,請(qǐng)找那個(gè)售后服務(wù)好的宜興做網(wǎng)站的公司定做!首先創(chuàng)建一個(gè)項(xiàng)目,這里不多做介紹。我們用about這個(gè)模塊來(lái)進(jìn)行瀑布流的開發(fā)。
這里先介紹一下實(shí)現(xiàn)的流程:
我們先要定義一個(gè)container,在container中存在有多個(gè)box,box里面放置圖片。
1、首先獲取container中的所有box。
2、獲取box的寬度和屏幕的寬度。
3、獲取在當(dāng)前屏幕寬度下一行可以放置多少個(gè)box。
4、將所有的box的高度放到一個(gè)數(shù)組當(dāng)中。
5、遍歷數(shù)組,獲取到第一行中最高度最小的box。
6、遍歷數(shù)組的下標(biāo)到達(dá)第二行的時(shí)候?qū)⒌诙诺氖自胤旁诘谝恍械母叨茸畹偷脑叵旅妗#ū热缫恍蟹帕巳齻€(gè)box,其中第三個(gè)高度最低,那么第四個(gè)就放在第三個(gè)box的下面。)
7、將元素放在最低元素下面后,則將第三個(gè)元素和第四個(gè)元素高度相加成為一個(gè)新的第三個(gè)元素,同樣重復(fù)即可實(shí)現(xiàn)。
下面是詳細(xì)代碼
about.html
![]({{image.src}})
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); //獲得一排擺的個(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"; //絕對(duì)定位圖片 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)頁(yè)的滾動(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); } }
最終效果:
以上是“Ionic3如何實(shí)現(xiàn)圖片瀑布流布局”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站制作公司行業(yè)資訊頻道!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。