web-dev-qa-db-ja.com

TypeError：$（...）。masonryは関数ではありません

いくつかの画像の石積みビューをロードしたいのですが、エラーが発生します：

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>
jqueryhtmljquery-masonry
6
Zisu

このエラーは、インラインスクリプトを実行しようとしたときにjQueryが読み込まれないためです。

これは、「src」属性を使用してjQueryを参照しているときに、htmlからインラインでスクリプトを実行しているためです。 jQuery参照をhtmlの順序で最初に配置した場合でも、ブラウザーは外部jQueryライブラリをロードする前にインラインJavaScriptを実行しようとします。そのため、エラーが発生します。

この2つの方法を簡単に修正できます。

  1. Jsファイルのインラインスクリプトタグにすべてを入れる

  2. 代わりにVanillajsを使用してください。 「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組積造を始めるための良いガイドは ここ です。

7
chasmani

クラスグリッドのあるコンテナで組積造を呼び出していますが、コンテナにclass = "grid"を指定していません。

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

Data-masonry-options（ "）をエスケープする必要はありません。現在のバージョンのjQuery（1.72ではなく1.11）を使用する必要があり、現在のコードのようにmasonry3xを呼び出す必要はありません。これを行うだけです。

$('.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)
1
Macsupport

私はこれと同じ問題を抱えていました。スクリプト参照（script type = "text/javascript" src = "\ masonry.pkgd.min.js"）をaspxページのヘッダーに移動することで修正しました。

0
Andrew C.

これを試して。

これはあなたの実例であり、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>
0
Mr.Happy