ionic3實(shí)戰(zhàn)教程之隨機(jī)布局瀑布流的實(shí)現(xiàn)方法
前言
最近一段時(shí)間由于項(xiàng)目需要接觸到了ionic3,發(fā)現(xiàn)真是一個(gè)利器啊!ionic項(xiàng)目提供了一套豐富的圖標(biāo)庫,在ionic3中也進(jìn)行了升級。
公司的一個(gè)項(xiàng)目中由于要用到一個(gè)瀑布流的特效,找了半天竟然沒有找到相關(guān)的資源,沒有辦法,只能迎著頭皮上了~
話不多說,先上圖
相信看過圖片的同學(xué)都明白什么意思了吧。對,就是瀑布流!
但是今天我們的瀑布流可不是一般的瀑布流。讓我們接著看:
自動(dòng)排版
我們的要求是做那種隨機(jī)凌亂的感覺,所以我們需要做一種機(jī)制,來將圖片選擇最優(yōu)的一種排列方式來展示到頁面上,也就是保證圖片與相鄰圖片的比例是最合適的然后在實(shí)現(xiàn)排列.
angular4
相信這個(gè)效果如果在平常的jq插件中似乎也不難實(shí)現(xiàn),確實(shí),網(wǎng)上也能搜到一些jq的插件。但是我們的技術(shù)棧是angular4呀~
在ng中我們的DOM操作基本都是放在指令中的,相信用過angularjs1.x的同學(xué)并不陌生了吧~,在angular4中也是一樣。
好了,讓我們貼代碼~
創(chuàng)建指令
我們假設(shè)你已經(jīng)在你的ionic中建立好了相關(guān)的組件,并且已經(jīng)擁有的圖片數(shù)據(jù),如果沒有相關(guān)基礎(chǔ)的同學(xué)建議大家先去看看ionic3 與 angular4的入門。
這是我的一個(gè)組件html的頁面,也許眼尖的同學(xué)已經(jīng)發(fā)現(xiàn)了我們的指令 [imagr-sort]="item",對的,我們的指令是需要你當(dāng)前的圖片的angular數(shù)據(jù)的。
創(chuàng)建一個(gè)指令ts
ionic g directive image-sort
執(zhí)行建立我們的指令。
創(chuàng)建完了我們的自定義指令就是這個(gè)樣子,空空如也啊~
編寫我們的邏輯
1.1接收并且注入一些東西:
看圖!
既然我們在模板中有輸入([[imagr-sort]="item"]);
那么我們也當(dāng)然應(yīng)該在指令中接收到輸入的數(shù)據(jù);如截圖中紅色箭頭所示,我將輸入的數(shù)據(jù)保存了起來->sourceArr;
然后我們在angular4中如果要獲取到dom宿主的一些屬性了,元素了等等就要用到ElementRef,Renderer2是angular4中的一個(gè)類似渲染器的東西吧,這個(gè)具體的我還沒有搞懂,大家可以多看看這塊的資料,我主要是在這個(gè)指令中用于更改Dom的一些結(jié)構(gòu)。
關(guān)于我們的imgLength ,我待會(huì)再說
1.2實(shí)際點(diǎn)!圖片是從異步加載過來的!
我們首先思考這樣一個(gè)問題:
我們的指令是在angular數(shù)據(jù)渲染的時(shí)候就開始執(zhí)行的,這個(gè)是基本大家都懂。
but!我們的圖片可都是異步加載的呢~,所以自然而然我們要有一個(gè)圖片加載的過程:
嗯,相信各位早就想到了---->image.onload
,不錯(cuò),是它~
也是時(shí)候說下之前的imgLength了,這個(gè)變量來記錄記載完成的圖片的數(shù)量,用來辨別是否當(dāng)前圖片都已經(jīng)加載完畢了,為我們后續(xù)的動(dòng)作做依據(jù)。
image.onerror
,這個(gè)相信大家也看明白了吧,這個(gè)是圖片加載失敗的一個(gè)函數(shù),我在里面做的操作是將加載失敗的圖片從原始的DOM中,angular的數(shù)據(jù)剔除。
這里面就用到了我們angular的渲染器this.render2();
相關(guān)功能方法大家可以去源碼里面看一下,基本上所有常用的Dom操作都有實(shí)現(xiàn)。
for循環(huán)呢是因?yàn)槲覀兊膱D片數(shù)據(jù)是多條的,所以我們要等待每一張圖片都順利的加載完成。
ps:注意在onerror與onload的函數(shù)中使用this要在imgOnlod中使用變量引用let _self = this;
圖片加載完成開始我們的改造工程
1.3將我們的適口按照網(wǎng)格劃分
imageStartStort()!
上圖
大家看1圖紅圈內(nèi),我是自己劃分出五個(gè)橫向網(wǎng)格標(biāo)準(zhǔn),便于我們待會(huì)將圖片比例做對比。
1.4將我們的圖片定義網(wǎng)格占用
我們創(chuàng)建了一個(gè)數(shù)組allImageArr=[];用于保存當(dāng)前處理過的所有圖片的數(shù)據(jù)。
還記的我們之前獲得的angular的數(shù)據(jù)吧,我們通過循環(huán)它來將圖片劃分網(wǎng)格占用。
我們的循環(huán)中都做了些什么?
1.圖片的寬高,并且求出每一張圖片的比例。
2.將獲得的圖片比列與我們自己定義的網(wǎng)格比例進(jìn)行區(qū)間劃分。
3.按照我們劃分的網(wǎng)格來計(jì)算出占有網(wǎng)格的圖片的新的寬度,所占網(wǎng)格數(shù)儲存并且記錄保存到我們的自定義的allImageArr中,并且在原有的angular數(shù)據(jù)中添加gridding數(shù)字那個(gè)記錄相應(yīng)的網(wǎng)格數(shù)。
執(zhí)行this.pictureColumnSort
方法;
我們的圖片已經(jīng)劃分完成了,接下來,我們來激情的一刻~
1.5圖片排列,跟據(jù)網(wǎng)格派選最合適的鄰居~
pictureColumnSort()!
上圖
這一個(gè)過程其實(shí)也沒啥好說的,主要就是循環(huán),查看每個(gè)圖片的網(wǎng)格數(shù),將最合適的進(jìn)行相鄰排序(執(zhí)行下一步:goExchange函數(shù)),最后匹配不上的單獨(dú)做一個(gè)5分網(wǎng)格戰(zhàn)術(shù)出來.
格式可以是多種:
3+2,1+4,1+1+3,1+3+1,2+3.。。。。。
怎么高興怎么來~
沒啥好說的就是循環(huán)篩選,大家看看圖就好。
1.6無序變有序,除了交換應(yīng)該沒有更好的選擇了吧
goExchange()! 上圖
看看1.5中的代碼,我們呢是在每次匹配到了合適的圖片之后執(zhí)行這個(gè)函數(shù),因?yàn)槲覀冃枰哑ヅ涞降膱D片換位置啊!
這個(gè)函數(shù)中接收到的repeatI與repeatA就是1.5中的雙重循環(huán)的索引,這個(gè)索引決定了我們換圖片的位置。
代碼所示的原理就是將匹配到的圖片換到我們當(dāng)前圖片的后面,將原來后面的圖片補(bǔ)到換過來圖片的位置,有點(diǎn)繞可能是我的比哦打能力不好,哈哈。
沒啥好說的這個(gè)函數(shù),就是換位置。
1.7取長補(bǔ)短,完工!
setHeight()!上圖
再次循環(huán)(代碼應(yīng)該還有不少改進(jìn)的地步,循環(huán)用的不少~);
這個(gè)地步已經(jīng)我們呢的布局頁面完成了,但是我們的圖片的尺寸實(shí)際上是不規(guī)則的,不忍直視,
所以我們在這個(gè)函數(shù)中將差異抹平,取長補(bǔ)短。
實(shí)際上我們的圖片肯定會(huì)有一點(diǎn)拉伸,所以我們也是取了平衡的一個(gè)中間點(diǎn),來進(jìn)行適當(dāng)?shù)睦臁?br />
這個(gè)函數(shù)肯定其實(shí)還可以做一些適當(dāng)?shù)南拗苼砭?xì)化圖片的尺寸調(diào)整。至此我們也算是寫完了整個(gè)指令邏輯。
完工! ioinc serve
至于中間的調(diào)用的過程有一點(diǎn)我要說明:
setTimeout(() => { _self.setHeight(angularImageList, ele); });
整個(gè)調(diào)用我也是晚班無奈的情況下才使用的,如果不加整個(gè)調(diào)用在setHeight函數(shù)中設(shè)置的angular,數(shù)據(jù)會(huì)莫名其妙的出現(xiàn)圖片位置更換錯(cuò)誤,至今誤解,如果大佬們能看到整個(gè)有好的解決方法也分享一下。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)手風(fēng)琴菜單代碼
這篇文章主要介紹了Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)手風(fēng)琴菜單的相關(guān)資料,需要的朋友可以參考下2016-04-04angular實(shí)現(xiàn)表單驗(yàn)證及提交功能
這篇文章主要為大家詳細(xì)介紹了angular實(shí)現(xiàn)表單驗(yàn)證及提交功能的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02Angular項(xiàng)目中使用scss文件的一些技巧小結(jié)
SCSS是Sass 3引入新的語法,其語法完全兼容 CSS3,并且繼承了Sass的強(qiáng)大功能,下面這篇文章主要給大家介紹了關(guān)于Angular項(xiàng)目中使用scss文件的一些技巧的相關(guān)資料,需要的朋友可以參考下2022-05-05Angular設(shè)計(jì)模式hierarchical?injector實(shí)現(xiàn)代碼復(fù)用模塊化
這篇文章主要為大家介紹了Angular設(shè)計(jì)模式hierarchical?injector實(shí)現(xiàn)代碼復(fù)用模塊化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10淺談angular.js中實(shí)現(xiàn)雙向綁定的方法$watch $digest $apply
Angular用戶都想知道數(shù)據(jù)綁定是怎么實(shí)現(xiàn)的。你可能會(huì)看到各種各樣的詞匯:$watch,$apply,$digest它們是如何工作的呢?這里我想回答這些問題,其實(shí)它們在官方的文檔里都已經(jīng)回答了,但是我還是想把它們結(jié)合在一起來講2015-10-10AngularJS使用攔截器實(shí)現(xiàn)的loading功能完整實(shí)例
這篇文章主要介紹了AngularJS使用攔截器實(shí)現(xiàn)的loading功能,結(jié)合完整實(shí)例形式分析了AngularJS攔截器的設(shè)置、調(diào)用及l(fā)oading功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05詳解AngularJS臟檢查機(jī)制及$timeout的妙用
本篇文章主要介紹了詳解AngularJS臟檢查機(jī)制及$timeout的妙用,“臟檢查”是Angular中的核心機(jī)制之一,它是實(shí)現(xiàn)雙向綁定、MVVM模式的重要基礎(chǔ),有興趣的可以了解一下2017-06-06