TypeError:$(...).masonry不是一个函数

Question

我想加载一些图像的砌体视图但发生错误:

TypeError: $(...).masonry is not a function

HTML代码:

<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>

jQuery代码:

<script type='text/javascript'>
$('.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>

我还包括:

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script>

Answer 1

该错误是因为在您尝试运行内联脚本时未加载jQuery.

这是因为您在使用"src"属性引用jQuery时从html运行脚本内联.即使你首先将jQuery引用放在html顺序中,浏览器也会在加载外部jQuery库之前尝试运行内联javascript.所以你得到了错误.

您可以通过以下两种方式轻松解决:

1. 将所有内容放在js文件中的内联脚本标记中

2. 请改用香草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的好指南就在这里.

Answer 2

尝试这个。

这是你的工作示例，你也可以检查 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>