砌體網格不加載

Question

我掙扎了一下 - 我的網站上的砌體網格沒有加載到頁面的初始訪問（只有當我再次刷新時才加載？）網格中的所有圖像加載正常，只是腳本沒有運行。

，您可以查看在這個網站上的首頁：http://moniquewilmoth.com

Answer 1

你的頁面是通過加載的jQuery（3.1.0的多個版本googleapis-CDN，3.1.1.from本地服務器和2.2.0從CloudFlare的-CDN）和兩個版本的石工（4.1.1從本地服務器和4.2.0通過unpkg-CDN）。

我認爲，這些不同的版本相互衝突並造成麻煩。只導入這些腳本的一個（最新版本），它應該運行。

就我而言，Masonry在Win 10上通過在Chrome和Firefox上測試運行，但IE和Edge失敗（但在重新加載頁面後再次運行）。

如果用於CDN版本的本地回退，看這裏： How to load local script files as fallback in cases where CDN are blocked/unavailable?

Answer 2

的幾個問題。您正在加載同位素和砌體。它們是獨立的庫。同位素具有砌體佈局，但不能一起使用。刪除庫「JS /同位素docs.min.js」，然後加載JS這樣的文件：

var elem = document.querySelector('.grid'); 
    var msnry = new Masonry(elem, { 
    // options 
    itemSelector: '.grid-item', 
    columnWidth: '.grid-width', 
    stagger: 30, 
    }); 

    // element argument can be a selector string 
    // for an individual element 
    var msnry = new Masonry('.grid', { 
    // options 
    }); 

：

<script src="js/jquery.min.js"></script> 
<script src="js/masonry.pkgd.min.js"></script> 
<script src="js/scripts.js"></script> 

下一頁您正在使用沒有任何選項設置的第二個電話呼叫的兩倍砌築

更改代碼這樣：

var elem = document.querySelector('.grid'); 
var msnry = new Masonry(elem, { 
// options 
itemSelector: '.grid-item', 
columnWidth: '.grid-width', 
    stagger: 30, 
}); 

第三，是你應該考慮使用imagesloaded.js作爲described here以避免圖像重疊。