未知の型エラー：$ container.masonryは関数ではありません

Question

ページが読み込まれたときに石積み画像に重複する問題があります。するためには画像が正しく、私はこのコードを追加してみましたが、まだ動作し、エラーを得ていないレイアウト：キャッチされない例外TypeError：$のcontainer.masonryあなたは多くの問題を持っている機能

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script> 

    <script src="/js/jquery.js"></script> 

$(document).ready(function() { 
    var $container = $("#container"); 

    $container.imagesLoaded(function() { 
     $container.masonry(); 
    }); 
}); 


<script> 
     (function ($) { 
      var $container = $('.masonry_wrapper'), 
       colWidth = function() { 
        var w = $container.width(), 
         columnNum = 1, 
         columnWidth = 0; 
        if (w > 1200) { 
         columnNum = 4; 
        } else if (w > 900) { 
         columnNum = 4; 
        } else if (w > 600) { 
         columnNum = 2; 
        } else if (w > 300) { 
         columnNum = 1; 
        } 
        columnWidth = Math.floor(w/columnNum); 
        $container.find('.item').each(function() { 
         var $item = $(this), 
          multiplier_w = $item.attr('class').match(/item-w(\d)/), 
          multiplier_h = $item.attr('class').match(/item-h(\d)/), 
          width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4, 
          height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4; 
         $item.css({ 
          width: width, 
          height: height 
         }); 
        }); 
        return columnWidth; 
       } 

       function refreshWaypoints() { 
        setTimeout(function() { 
        }, 10200); 
       } 

       $('nav.portfolio-filter ul a').on('click', function() { 
        var selector = $(this).attr('data-filter'); 
        $container.isotope({ filter: selector }, refreshWaypoints()); 
        $('nav.portfolio-filter ul a').removeClass('active'); 
        $(this).addClass('active'); 
        return false; 
       }); 

       function setPortfolio() { 
        setColumns(); 
        $container.isotope('reLayout'); 
       } 

       isotope = function() { 
        $container.isotope({ 
         resizable: true, 
         itemSelector: '.item', 
         masonry: { 
          columnWidth: colWidth(), 
          gutterWidth: 0 
         } 
        }); 
       }; 
      isotope(); 
      $(window).smartresize(isotope); 
     }(jQuery)); 
    </script> 

Answer 1

ではありません。

1. あなたの石工・コードは、あなたがあなたのコードに石材や同位体の両方を使用しているスクリプトタグ
2. 内にありません。 Isotope.jsは石造りのレイアウトを持っていますが、masonry.jsではありません。彼らは一緒に使用されていません。 （とにかくisotope.jsをロードしていません）。石積みはアイテムをフィルタリングせず、同位体のみをフィルタリングします。使用する1つを選択してコードを使用する
3. masonry.jsの後にimagesloaded.jsをロードしていますが、コード内でmasonryの前にimagesloaded関数を呼び出しています。
4. jason.jsの前にmasonry.jsをロードしていますが、jasonを使用して石積みをロードしています。

5. あなたいる

   のvar $コンテナ= $（ 'masonry_wrapper。'）$コンテナと呼ばれる2つの変数

   のvar $コンテナ= $（ "＃コンテナ"）;ここで

は、少なくとも負荷石工への基本的なコードの設定です：

<script src="/js/jquery.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script> 
<script> 
$(document).ready(function() { 
var $container = $("#container"); 
$container.imagesLoaded(function() { 
    $container.masonry(); 
}); 
}); 
</script> 

あなたのコードの残りの部分は同位体のためです。