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

梅問題-「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」解決瀑布流圖片未載入完造成區塊覆蓋的問題
[範例預覽]

相關文章

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

jQuery取得各裝置視窗實際顯示的寬度、高度

jQuery取得各裝置視窗實際顯示的寬度、高度

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

近期講座

近期講座

更多講座