砌体网格不加载

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以避免图像重叠。