石積みのグリッドはロードされていません

Question

私のウェブサイトの石積みグリッドは最初のページを読み込んでいません（再度リフレッシュするとロードされますか？）グリッド内のすべてのイメージは正常にロードされています、スクリプトは実行されていません。

このサイトのホームページ上でそれを見ることができます：http://moniquewilmoth.com

Answer 1

あなたのページには、CloudFlareのからjqueryの複数のバージョン（3.1.0経由googleapis-CDN、3.1.1.fromローカルサーバーおよび2.2.0をロードしています-CDN）と2つのバージョンの石工（4.1.1ローカルサーバーと4.2.0 unpkg-CDNを介して）。

私はこれらの異なるバージョンが互いに矛盾しており、トラブルを引き起こしていると思います。これらのスクリプトの1つ（最新）バージョンのみをインポートし、実行する必要があります。

私のケースでは、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ファイルを読み込む：

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

次にあなたが2回目の呼び出しが設定されたすべてのオプションを持っていないで二回石工を呼び出している：

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 
    }); 

変更し、これにコード：

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

第三に、あなたがイメージが重なっ避けるためにdescribed hereとしてimagesloaded.jsを使用して検討すべきです。