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>

May be you forgot to include jQuery. Check this jsFiddle: `http://jsfiddle.net/mananpatel/6mbhphvj/1/` — Mr.Happy, Sep 04 '15 at 13:29
Yes @Mr.Happy I checked it .. I used your code but still console error TypeError: $(...).masonry is not a function $('.grid').masonry({ I already Try With jQuery('.grid') — Zisu, Sep 04 '15 at 13:48
Can you please remove `code.jquery.com/jquery-1.11.3.js` and replce with this jQuery `http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js` and let me know. — Mr.Happy, Sep 04 '15 at 13:50
@Zisu Did you ever get this to work? I've tried all of the answers with the same result as you were getting. — michaelp, May 06 '16 at 01:21
I think this error occurred because of either js library version or js conflict issue — Zisu, May 10 '16 at 07:06

score 8 · Answer 1 · answered Jul 26 '17 at 09:11

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:

Putting everything in the inline script tag in a js file

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.

OMG been trying for hours to get this to work! tried everything it seems until the above! — FoamyMedia, Aug 08 '18 at 15:50
HEY HEY, THANK YOU VERY VERY MUCH, THE ONLY WORKING ANSWER IN WHOLE INTERNET — Altro, Apr 03 '21 at 04:36

Macsupport · Answer 2 · 2015-09-04T17:25:21.820

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)

Still error TypeError: $(...).masonry is not a function but i included $('.grid').masonry({ — Zisu, Sep 04 '15 at 14:09

score 0 · Answer 3 · answered Sep 04 '15 at 13:33

Try this.

This is working example of yours and you can also check on 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>

I copy & paste your code still error I include js Still console error TypeError: $(...).masonry is not a function $('.grid').masonry({ — Zisu, Sep 04 '15 at 14:00

score 0 · Answer 4 · answered Mar 08 '17 at 15:22

0

I had this same issue. I fixed it by moving the script reference (script type="text/javascript" src="\masonry.pkgd.min.js") up to the header of my aspx page.

answered Mar 08 '17 at 15:22

Andrew C.

1

score 0 · Answer 5 · edited Aug 06 '20 at 10:14

The solution is quite simple! Include the new JS 3.5.1 library, then include jquery-migrate-3.3.1 to support the old functionality, after all this comment out the line:

//    function initGrid()
//    {
//      setTimeout(function()
//      {
//          $('.grid').masonry(
//          {
//              itemSelector:'.grid-item',
//              columnWidth: 80,
//              gutter: 15
//          });
//     }, 500);

Then you initialize:

$(document).ready(function()
{
    //"use strict";
    /* 

    1. Vars and Inits
    */
    var header = $('.header');
    var menuActive = false;
    var menu = $('.menu');
    var burger = $('.hamburger');
    setHeader();
    $(window).on('resize', function()
    {
        setHeader();
    });

    $(document).on('scroll', function()
    {
        setHeader();
    });
    initMenu();
    initHomeSlider();
    initVideo();
    initTopSlider();
    initVidSlider();
    initEventsSlider();
//  initGrid();
    $('.grid').masonry(
    {
        itemSelector:'.grid-item',
        columnWidth: 80,
        gutter: 15
    });
    /*

And everything should work !! If you have any questions, write to me on Telegram @Svanolson

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

HTML Code:

jQuery Code:

5 Answers5