jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

　　前幾天有與大家分享Bootstrap+Masonry瀑布流的套件，讓Bootstrap內建的網格系統，也支援瀑布流的排版，這對於區塊內的元素長短不一時，相當的方便好用，同時瀑布流的欄位數，還是由Bootstrap來作控制，雖然說瀑布流解決了長短不一的問題，但也衍生出另一個問題，那就是當區塊內有圖片時，當圖片還沒載入完成時，區塊就會開始上向疊，而造成區塊覆蓋的問題。

　　因此這時可透過另一隻外掛imagesLoaded，而imagesLoaded最主要的是功用就在於，當圖片載入完成後，再去觸發Masonry瀑布流的套件開始動作，如此一來就可解決圖片覆蓋的問題，至於這隻外掛要怎麼使用呢?以及要如何與Masonry瀑布流的套件整合在一塊，現在就一塊來看看吧!

---

imagesLoaded

---

Step1
首先，先將html的架構設定好，在下方的部分，分別將畫面分割成1/4。
[html]
<div class="container">
<div class="row masonry">
<div class="col-md-3 item"><img src="https://unsplash.it/2848/4272?image=1027" alt="" class="img-responsive"></div>
<div class="col-md-3 item"><img src="https://unsplash.it/4951/3301?image=1025" alt="" class="img-responsive"></div>
<div class="col-md-3 item"><img src="https://unsplash.it/1920/1280?image=1024" alt="" class="img-responsive"></div>
<div class="col-md-3 item"><img src="https://unsplash.it/4288/2848?image=1020" alt="" class="img-responsive"></div>
<div class="col-md-3 item"><img src="https://unsplash.it/1942/2913?image=948" alt="" class="img-responsive"></div>
<div class="col-md-3 item"><img src="https://unsplash.it/5472/3648?image=939" alt="" class="img-responsive"></div>
<div class="col-md-3 item"><img src="https://unsplash.it/4342/2895?image=893" alt="" class="img-responsive"></div>
<div class="col-md-3 item"><img src="https://unsplash.it/2900/4334?image=870" alt="" class="img-responsive"></div>
<div class="col-md-3 item"><img src="https://unsplash.it/0/0?image=789" alt="" class="img-responsive"></div>
<div class="col-md-3 item"><img src="https://unsplash.it/0/0?image=666" alt="" class="img-responsive"></div>
</div>
</div>
[/html]

---

Step2
再將Masonry瀑布流的套件加入並啟用後，這時會發現到，圖片還沒載入完成時，區塊就已經在排版，造成區塊覆蓋的問題。

---

Step3
這時在/body結尾前方，加入imagesLoaded套件，並啟用與當圖片載入完成時，再呼叫Masonry瀑布流套件。
[javascript]
<script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script>
$(function(){
/* 瀑布流區塊div */
var $container = $(‘.masonry’);

//當圖片讀取完畢才執行
$container.imagesLoaded(function (){
//選擇瀑布流的區塊名稱
$container.masonry({
itemSelector: ‘.item’

})

});
});
</script>
[/javascript]

---

Step4
弄好後，回到網頁看一下，當圖片載入完畢時，才會呼叫Masonry瀑布流的套件動作，如此一來就可解決區塊覆蓋的問題。

---

[範例預覽]