这个错误是因为当你尝试运行内联脚本时jQuery没有被加载。
这是因为您正在从html内联运行脚本，而您正在使用“src”属性引用jQuery。即使您将jQuery引用放在html顺序的第一位，浏览器也会在加载外部jQuery库之前尝试运行内联JavaScript。所以你得到了错误。
您可以通过两种方式轻松解决此问题：
1.将内联脚本标记中的所有内容放入js文件中
1.使用vanilla js代替。将“masonry-grid”id添加到容器div中，然后将内联脚本更改为：

<script type='text/javascript'>
var container = document.querySelector('#masonry-grid');
var msnry = new Masonry( container, {
   columnWidth: 200,
   itemSelector: '.item'
});          
</script>

一个很好的JS Masonry入门指南是here。

你在一个有class grid的容器上调用masonry，但是你没有给容器class=“grid”。

<div data-masonry-options="{'columnWidth': 105, 'itemSelector':'.item'}" class="grid img-container js-masonry">

你不需要转义你的data-masonry-options（“），你应该使用当前版本的jQuery（1.11，而不是1.72），你不需要像你当前的代码那样调用masonry 3x。就这样做：

$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 200
});

由于此问题，@Mr.Happy的jsfiddle显示以下错误：

[Error] Bad element for masonry: null
Outlayer (masonry.pkgd.js, line 2128)
Layout (masonry.pkgd.js, line 2932)
(anonymous function) (show, line 34)
dispatch (jquery.min.js, line 3)
i (jquery.min.js, line 3)
[Error] Bad element for masonry: .grid
Outlayer (masonry.pkgd.js, line 2128)
Layout (masonry.pkgd.js, line 2932)
(anonymous function) (show, line 42)
dispatch (jquery.min.js, line 3)
i (jquery.min.js, line 3)

试试这个
这是你的工作示例，你也可以检查jsFiddle：http://jsfiddle.net/mananpatel/6mbhphvj/1/

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script>
<div data-masonry-options="{&quot;columnWidth&quot;: 105, &quot;itemSelector&quot;:&quot;.item&quot;}" class="img-container js-masonry" style="position: relative; height: 381.417px;">
  <div class="item">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/889/88940833.jpg">
  </div>
  <div class="item">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/907/90775901.jpg">
  </div>
  <div class="item">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/294/29489326.jpg">
  </div>
  <div class="item ">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/100/100656385.jpg">
  </div>
  <div class="item ">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/889/88940839.jpg">
  </div>
  <div class="item ">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/111/111773987.jpg">
  </div>
  <div class="item ">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/146/146371016.jpg">
  </div>
  <div class="item">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/103/10313578.jpg">
  </div>
  <div class="item ">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/554/55473337.jpg">
  </div>
  <div class="item ">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/537/53727259.jpg">
  </div>
  <div class="item ">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/111/111246515.jpg">
  </div>
  <div class="item">
    <img src="https://s3.amazonaws.com/clarifai-img/demo/461/46176355.jpg">
  </div>
</div>

我也有同样的问题。我通过将脚本引用（script type=“text/JavaScript”src="\masonry.pkgd.min.js”）向上移动到aspx页面的头部来修复它。

解决办法很简单！包括新的JS 3.5.1库，然后包括jquery-migrate-3.3.1以支持旧功能，在所有这些注解之后：

//    function initGrid()
//    {
//      setTimeout(function()
//      {
//          $('.grid').masonry(
//          {
//              itemSelector:'.grid-item',
//              columnWidth: 80,
//              gutter: 15
//          });
//     }, 500);

然后初始化：

$(document).ready(function()
{
    //"use strict";
    /* 

    1. Vars and Inits
    */
    var header = $('.header');
    var menuActive = false;
    var menu = $('.menu');
    var burger = $('.hamburger');
    setHeader();
    $(window).on('resize', function()
    {
        setHeader();
    });

    $(document).on('scroll', function()
    {
        setHeader();
    });
    initMenu();
    initHomeSlider();
    initVideo();
    initTopSlider();
    initVidSlider();
    initEventsSlider();
//  initGrid();
    $('.grid').masonry(
    {
        itemSelector:'.grid-item',
        columnWidth: 80,
        gutter: 15
    });
    /*

一切都应该工作！！如果您有任何问题，请写信给我Telegram @Svanolson

如果你正在使用ES6导入或webpack等打包工具，并且想使用jQuery版本，你必须使用jQueryBridget。他们的额外页面上的说明：https://masonry.desandro.com/extras.html#es6

import jQueryBridget from 'jquery-bridget'
import Masonry from 'masonry-layout/dist/masonry.pkgd'
jQueryBridget( 'masonry', Masonry, $ );