title: TypeError: $(...).masonry is not a function
body: <p>I want to load a Masonry view of some images but an error occurs:</p>
  
  <pre><code>TypeError: $(...).masonry is not a function
  </code></pre>
  
  <h2>HTML Code:</h2>
  
  <pre><code>&lt;div data-masonry-options="{&amp;quot;columnWidth&amp;quot;: 105, &amp;quot;itemSelector&amp;quot;:&amp;quot;.item&amp;quot;}" class="img-container js-masonry" style="position: relative; height: 381.417px;"&gt;
      &lt;div class="item"&gt;
          &lt;img src="https://s3.amazonaws.com/clarifai-img/demo/889/88940833.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;img src="https://s3.amazonaws.com/clarifai-img/demo/907/90775901.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;img src="https://s3.amazonaws.com/clarifai-img/demo/294/29489326.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="item "&gt;
          &lt;img src="https://s3.amazonaws.com/clarifai-img/demo/100/100656385.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="item "&gt;
          &lt;img src="https://s3.amazonaws.com/clarifai-img/demo/889/88940839.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="item "&gt;
          &lt;img src="https://s3.amazonaws.com/clarifai-img/demo/111/111773987.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="item "&gt;
          &lt;img src="https://s3.amazonaws.com/clarifai-img/demo/146/146371016.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;img src="https://s3.amazonaws.com/clarifai-img/demo/103/10313578.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="item "&gt;
          &lt;img src="https://s3.amazonaws.com/clarifai-img/demo/554/55473337.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="item "&gt;
          &lt;img src="https://s3.amazonaws.com/clarifai-img/demo/537/53727259.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="item "&gt;
          &lt;img src="https://s3.amazonaws.com/clarifai-img/demo/111/111246515.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;img src="https://s3.amazonaws.com/clarifai-img/demo/461/46176355.jpg"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>jQuery Code:</h2>
  
  <pre><code>&lt;script type='text/javascript'&gt;
  $('.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
  });                         
  &lt;/script&gt;
  </code></pre>
  
  <p>I also include:</p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"&gt;&lt;/script&gt;
  </code></pre>