前言

最近一段時(shí)間由于項(xiàng)目需要接觸到了ionic3,發(fā)現(xiàn)真是一個(gè)利器啊!ionic項(xiàng)目提供了一套豐富的圖標(biāo)庫(kù)，在ionic3中也進(jìn)行了升級(jí)。

公司的一個(gè)項(xiàng)目中由于要用到一個(gè)瀑布流的特效，找了半天竟然沒(méi)有找到相關(guān)的資源，沒(méi)有辦法，只能迎著頭皮上了~

話不多說(shuō)，先上圖

相信看過(guò)圖片的同學(xué)都明白什么意思了吧。對(duì)，就是瀑布流！

但是今天我們的瀑布流可不是一般的瀑布流。讓我們接著看:

自動(dòng)排版

我們的要求是做那種隨機(jī)凌亂的感覺(jué)，所以我們需要做一種機(jī)制,來(lái)將圖片選擇最優(yōu)的一種排列方式來(lái)展示到頁(yè)面上，也就是保證圖片與相鄰圖片的比例是最合適的然后在實(shí)現(xiàn)排列.

angular4

相信這個(gè)效果如果在平常的jq插件中似乎也不難實(shí)現(xiàn)，確實(shí)，網(wǎng)上也能搜到一些jq的插件。但是我們的技術(shù)棧是angular4呀~

在ng中我們的DOM操作基本都是放在指令中的，相信用過(guò)angularjs1.x的同學(xué)并不陌生了吧~,在angular4中也是一樣。

好了，讓我們貼代碼~

創(chuàng)建指令

我們假設(shè)你已經(jīng)在你的ionic中建立好了相關(guān)的組件，并且已經(jīng)擁有的圖片數(shù)據(jù)，如果沒(méi)有相關(guān)基礎(chǔ)的同學(xué)建議大家先去看看ionic3 與 angular4的入門(mén)。

這是我的一個(gè)組件html的頁(yè)面，也許眼尖的同學(xué)已經(jīng)發(fā)現(xiàn)了我們的指令 [imagr-sort]="item",對(duì)的，我們的指令是需要你當(dāng)前的圖片的angular數(shù)據(jù)的。

創(chuàng)建一個(gè)指令ts

ionic g directive image-sort執(zhí)行建立我們的指令。

創(chuàng)建完了我們的自定義指令就是這個(gè)樣子，空空如也啊~

編寫(xiě)我們的邏輯

1.1接收并且注入一些東西:

看圖！

既然我們?cè)谀０逯杏休斎?code>([[imagr-sort]="item"]);那么我們也當(dāng)然應(yīng)該在指令中接收到輸入的數(shù)據(jù)；如截圖中紅色箭頭所示，我將輸入的數(shù)據(jù)保存了起來(lái)->sourceArr;

然后我們?cè)赼ngular4中如果要獲取到dom宿主的一些屬性了，元素了等等就要用到ElementRef，Renderer2是angular4中的一個(gè)類(lèi)似渲染器的東西吧，這個(gè)具體的我還沒(méi)有搞懂，大家可以多看看這塊的資料，我主要是在這個(gè)指令中用于更改Dom的一些結(jié)構(gòu)。

關(guān)于我們的imgLength ，我待會(huì)再說(shuō)

1.2實(shí)際點(diǎn)！圖片是從異步加載過(guò)來(lái)的！

我們首先思考這樣一個(gè)問(wèn)題：

我們的指令是在angular數(shù)據(jù)渲染的時(shí)候就開(kāi)始執(zhí)行的，這個(gè)是基本大家都懂。

but！我們的圖片可都是異步加載的呢~，所以自然而然我們要有一個(gè)圖片加載的過(guò)程:

嗯，相信各位早就想到了---->image.onload,不錯(cuò)，是它~

也是時(shí)候說(shuō)下之前的imgLength了，這個(gè)變量來(lái)記錄記載完成的圖片的數(shù)量，用來(lái)辨別是否當(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;

圖片加載完成開(kāi)始我們的改造工程

1.3將我們的適口按照網(wǎng)格劃分

imageStartStort()！

上圖

大家看1圖紅圈內(nèi)，我是自己劃分出五個(gè)橫向網(wǎng)格標(biāo)準(zhǔn)，便于我們待會(huì)將圖片比例做對(duì)比。

1.4將我們的圖片定義網(wǎng)格占用

我們創(chuàng)建了一個(gè)數(shù)組allImageArr=[];用于保存當(dāng)前處理過(guò)的所有圖片的數(shù)據(jù)。

還記的我們之前獲得的angular的數(shù)據(jù)吧，我們通過(guò)循環(huán)它來(lái)將圖片劃分網(wǎng)格占用。

我們的循環(huán)中都做了些什么？

      1.圖片的寬高，并且求出每一張圖片的比例。

      2.將獲得的圖片比列與我們自己定義的網(wǎng)格比例進(jìn)行區(qū)間劃分。

      3.按照我們劃分的網(wǎng)格來(lái)計(jì)算出占有網(wǎng)格的圖片的新的寬度，所占網(wǎng)格數(shù)儲(chǔ)存并且記錄保存到我們的自定義的allImageArr中，并且在原有的angular數(shù)據(jù)中添加gridding數(shù)字那個(gè)記錄相應(yīng)的網(wǎng)格數(shù)。

執(zhí)行this.pictureColumnSort方法;

我們的圖片已經(jīng)劃分完成了，接下來(lái)，我們來(lái)激情的一刻~

1.5圖片排列，跟據(jù)網(wǎng)格派選最合適的鄰居~

pictureColumnSort()!

上圖

這一個(gè)過(guò)程其實(shí)也沒(méi)啥好說(shuō)的，主要就是循環(huán)，查看每個(gè)圖片的網(wǎng)格數(shù)，將最合適的進(jìn)行相鄰排序(執(zhí)行下一步:goExchange函數(shù)),最后匹配不上的單獨(dú)做一個(gè)5分網(wǎng)格戰(zhàn)術(shù)出來(lái).

格式可以是多種:

3+2，1+4，1+1+3，1+3+1，2+3.。。。。。

怎么高興怎么來(lái)~

沒(méi)啥好說(shuō)的就是循環(huán)篩選，大家看看圖就好。

1.6無(wú)序變有序，除了交換應(yīng)該沒(méi)有更好的選擇了吧

goExchange()! 上圖

看看1.5中的代碼，我們呢是在每次匹配到了合適的圖片之后執(zhí)行這個(gè)函數(shù)，因?yàn)槲覀冃枰哑ヅ涞降膱D片換位置啊！
這個(gè)函數(shù)中接收到的repeatI與repeatA就是1.5中的雙重循環(huán)的索引，這個(gè)索引決定了我們換圖片的位置。

代碼所示的原理就是將匹配到的圖片換到我們當(dāng)前圖片的后面，將原來(lái)后面的圖片補(bǔ)到換過(guò)來(lái)圖片的位置，有點(diǎn)繞可能是我的比哦打能力不好，哈哈。

沒(méi)啥好說(shuō)的這個(gè)函數(shù)，就是換位置。

1.7取長(zhǎng)補(bǔ)短，完工！

setHeight()!上圖

再次循環(huán)(代碼應(yīng)該還有不少改進(jìn)的地步，循環(huán)用的不少~);

這個(gè)地步已經(jīng)我們呢的布局頁(yè)面完成了，但是我們的圖片的尺寸實(shí)際上是不規(guī)則的，不忍直視，
所以我們?cè)谶@個(gè)函數(shù)中將差異抹平，取長(zhǎng)補(bǔ)短。

實(shí)際上我們的圖片肯定會(huì)有一點(diǎn)拉伸，所以我們也是取了平衡的一個(gè)中間點(diǎn)，來(lái)進(jìn)行適當(dāng)?shù)睦臁?br />

這個(gè)函數(shù)肯定其實(shí)還可以做一些適當(dāng)?shù)南拗苼?lái)精細(xì)化圖片的尺寸調(diào)整。至此我們也算是寫(xiě)完了整個(gè)指令邏輯。

完工! ioinc serve

至于中間的調(diào)用的過(guò)程有一點(diǎn)我要說(shuō)明：

setTimeout(() => {
  _self.setHeight(angularImageList, ele);
  });

整個(gè)調(diào)用我也是晚班無(wú)奈的情況下才使用的，如果不加整個(gè)調(diào)用在setHeight函數(shù)中設(shè)置的angular，數(shù)據(jù)會(huì)莫名其妙的出現(xiàn)圖片位置更換錯(cuò)誤，至今誤解，如果大佬們能看到整個(gè)有好的解決方法也分享一下。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論