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

Question

I want to load a Masonry view of some images but an error occurs:

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

HTML Code:

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

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

I also include:

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

Answer 1

That error is because jQuery isn't loaded when you are trying to run the inline script.

This is because you are running the script inline from the html, while you are referencing jQuery using the "src" attribute. Even if you put the jQuery reference first in the html order, the browser will try to run inline javascript before it loads the external jQuery library. And so you get the error.

You can easily fix this two ways:

1. Putting everything in the inline script tag in a js file

2. Use vanilla js instead. Add a "masonry-grid" id to the container div, then change the inline script to this:

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

A good guide for getting started with JS Masonry is here.