Javascript, 網頁設計

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

梅干 2017/01/06
梅問題-「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋的問題
  前幾天有與大家分享Bootstrap+Masonry瀑布流的套件,讓Bootstrap內建的網格系統,也支援瀑布流的排版,這對於區塊內的元素長短不一時,相當的方便好用,同時瀑布流的欄位數,還是由Bootstrap來作控制,雖然說瀑布流解決了長短不一的問題,但也衍生出另一個問題,那就是當區塊內有圖片時,當圖片還沒載入完成時,區塊就會開始上向疊,而造成區塊覆蓋的問題。
  因此這時可透過另一隻外掛imagesLoaded,而imagesLoaded最主要的是功用就在於,當圖片載入完成後,再去觸發Masonry瀑布流的套件開始動作,如此一來就可解決圖片覆蓋的問題,至於這隻外掛要怎麼使用呢?以及要如何與Masonry瀑布流的套件整合在一塊,現在就一塊來看看吧!
imagesLoaded
網站名稱:imagesLoaded
連結網址:http://imagesloaded.desandro.com/

Step1
首先,先將html的架構設定好,在下方的部分,分別將畫面分割成1/4。
<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>

Step2
再將Masonry瀑布流的套件加入並啟用後,這時會發現到,圖片還沒載入完成時,區塊就已經在排版,造成區塊覆蓋的問題。
梅問題-「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋的問題
Step3
這時在/body結尾前方,加入imagesLoaded套件,並啟用與當圖片載入完成時,再呼叫Masonry瀑布流套件。
<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>

Step4
弄好後,回到網頁看一下,當圖片載入完畢時,才會呼叫Masonry瀑布流的套件動作,如此一來就可解決區塊覆蓋的問題。 梅問題-「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋的問題
[範例預覽]