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.

Answer 2

You are calling masonry on a container with a class grid yet you have not given the container the class="grid".

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

You do not need to escape your data-masonry-options ("), you should use a current version of jQuery (1.11, not 1.72) and you don't need to call masonry 3x as your current code does. Just do this:

$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 200
});

The jsfiddle by @Mr.Happy shows the following errors because of this issue:

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