前言
最近一段時間由于項目需要接觸到了ionic3,發(fā)現(xiàn)真是一個利器啊!ionic項目提供了一套豐富的圖標庫，在ionic3中也進行了升級。
公司的一個項目中由于要用到一個瀑布流的特效，找了半天竟然沒有找到相關(guān)的資源，沒有辦法，只能迎著頭皮上了~
話不多說，先上圖
相信看過圖片的同學都明白什么意思了吧。對，就是瀑布流！
但是今天我們的瀑布流可不是一般的瀑布流。讓我們接著看:
自動排版
我們的要求是做那種隨機凌亂的感覺，所以我們需要做一種機制,來將圖片選擇最優(yōu)的一種排列方式來展示到頁面上，也就是保證圖片與相鄰圖片的比例是最合適的然后在實現(xiàn)排列.
angular4
相信這個效果如果在平常的jq插件中似乎也不難實現(xiàn)，確實，網(wǎng)上也能搜到一些jq的插件。但是我們的技術(shù)棧是angular4呀~
在ng中我們的DOM操作基本都是放在指令中的，相信用過angularjs1.x的同學并不陌生了吧~,在angular4中也是一樣。
好了，讓我們貼代碼~
創(chuàng)建指令
我們假設(shè)你已經(jīng)在你的ionic中建立好了相關(guān)的組件，并且已經(jīng)擁有的圖片數(shù)據(jù)，如果沒有相關(guān)基礎(chǔ)的同學建議大家先去看看ionic3 與 angular4的入門。
這是我的一個組件html的頁面，也許眼尖的同學已經(jīng)發(fā)現(xiàn)了我們的指令 [imagr-sort]="item",對的，我們的指令是需要你當前的圖片的angular數(shù)據(jù)的。
創(chuàng)建一個指令ts
ionic g directive image-sort執(zhí)行建立我們的指令。
創(chuàng)建完了我們的自定義指令就是這個樣子，空空如也啊~
編寫我們的邏輯
1.1接收并且注入一些東西:
看圖！
既然我們在模板中有輸入([[imagr-sort]="item"]);那么我們也當然應(yīng)該在指令中接收到輸入的數(shù)據(jù)；如截圖中紅色箭頭所示，我將輸入的數(shù)據(jù)保存了起來->sourceArr;
然后我們在angular4中如果要獲取到dom宿主的一些屬性了，元素了等等就要用到ElementRef，Renderer2是angular4中的一個類似渲染器的東西吧，這個具體的我還沒有搞懂，大家可以多看看這塊的資料，我主要是在這個指令中用于更改Dom的一些結(jié)構(gòu)。
關(guān)于我們的imgLength ，我待會再說
1.2實際點！圖片是從異步加載過來的！
我們首先思考這樣一個問題：
我們的指令是在angular數(shù)據(jù)渲染的時候就開始執(zhí)行的，這個是基本大家都懂。
but！我們的圖片可都是異步加載的呢~，所以自然而然我們要有一個圖片加載的過程:
嗯，相信各位早就想到了---->image.onload,不錯，是它~
也是時候說下之前的imgLength了，這個變量來記錄記載完成的圖片的數(shù)量，用來辨別是否當前圖片都已經(jīng)加載完畢了，為我們后續(xù)的動作做依據(jù)。
image.onerror,這個相信大家也看明白了吧，這個是圖片加載失敗的一個函數(shù)，我在里面做的操作是將加載失敗的圖片從原始的DOM中，angular的數(shù)據(jù)剔除。
這里面就用到了我們angular的渲染器this.render2();
相關(guān)功能方法大家可以去源碼里面看一下，基本上所有常用的Dom操作都有實現(xiàn)。
for循環(huán)呢是因為我們的圖片數(shù)據(jù)是多條的，所以我們要等待每一張圖片都順利的加載完成。
ps:注意在onerror與onload的函數(shù)中使用this要在imgOnlod中使用變量引用let _self = this;
圖片加載完成開始我們的改造工程
1.3將我們的適口按照網(wǎng)格劃分
imageStartStort()！
上圖
大家看1圖紅圈內(nèi)，我是自己劃分出五個橫向網(wǎng)格標準，便于我們待會將圖片比例做對比。
1.4將我們的圖片定義網(wǎng)格占用
我們創(chuàng)建了一個數(shù)組allImageArr=[];用于保存當前處理過的所有圖片的數(shù)據(jù)。
還記的我們之前獲得的angular的數(shù)據(jù)吧，我們通過循環(huán)它來將圖片劃分網(wǎng)格占用。
我們的循環(huán)中都做了些什么？
1.圖片的寬高，并且求出每一張圖片的比例。
2.將獲得的圖片比列與我們自己定義的網(wǎng)格比例進行區(qū)間劃分。
3.按照我們劃分的網(wǎng)格來計算出占有網(wǎng)格的圖片的新的寬度，所占網(wǎng)格數(shù)儲存并且記錄保存到我們的自定義的allImageArr中，并且在原有的angular數(shù)據(jù)中添加gridding數(shù)字那個記錄相應(yīng)的網(wǎng)格數(shù)。
執(zhí)行this.pictureColumnSort方法;
我們的圖片已經(jīng)劃分完成了，接下來，我們來激情的一刻~
1.5圖片排列，跟據(jù)網(wǎng)格派選最合適的鄰居~
pictureColumnSort()!
上圖
這一個過程其實也沒啥好說的，主要就是循環(huán)，查看每個圖片的網(wǎng)格數(shù)，將最合適的進行相鄰排序(執(zhí)行下一步:goExchange函數(shù)),最后匹配不上的單獨做一個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í)行這個函數(shù)，因為我們需要把匹配到的圖片換位置??！
這個函數(shù)中接收到的repeatI與repeatA就是1.5中的雙重循環(huán)的索引，這個索引決定了我們換圖片的位置。
代碼所示的原理就是將匹配到的圖片換到我們當前圖片的后面，將原來后面的圖片補到換過來圖片的位置，有點繞可能是我的比哦打能力不好，哈哈。
沒啥好說的這個函數(shù)，就是換位置。
1.7取長補短，完工！
setHeight()!上圖
再次循環(huán)(代碼應(yīng)該還有不少改進的地步，循環(huán)用的不少~);
這個地步已經(jīng)我們呢的布局頁面完成了，但是我們的圖片的尺寸實際上是不規(guī)則的，不忍直視，
所以我們在這個函數(shù)中將差異抹平，取長補短。
實際上我們的圖片肯定會有一點拉伸，所以我們也是取了平衡的一個中間點，來進行適當?shù)睦臁?br />
這個函數(shù)肯定其實還可以做一些適當?shù)南拗苼砭毣瘓D片的尺寸調(diào)整。至此我們也算是寫完了整個指令邏輯。
完工! ioinc serve
至于中間的調(diào)用的過程有一點我要說明：
重慶分公司
重慶分公司
setTimeout(() => {
_self.setHeight(angularImageList, ele);
});另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
