Masonry.js not working when creating dynamic divs from jQuery

Question

I'm making a page by getting links from camper news API from Free Code Camp and I'm having trouble getting masonry.js to work when I try to align the layout of the news links with different image sizes. Here's my code:

$(document).ready(function() {
  $.getJSON("http://www.freecodecamp.com/news/hot", function(json) {
    var html = ""
    json.forEach(function(val) {
      html += "<div class='grid-item'>";
      html += "<a href='" + val.link + "' target='_blank'>";
      if (val.image === "" || val.image === "undefined") {
        html += "<img src='" + val.author.picture + "'>";
      } else {
        html += "<img src='" + val.image + "'>";
      }
      html += "</a>"
      html += "<p><a href='" + val.link + "' target='_blank'>" + val.headline + "</a></p>"
      html += "<p>" + val.rank + " points</p>";
      html += "</div>"
    });
    $("#camper-news").html(html);
    $(".grid-item:first").removeClass().addClass("grid-sizer")
  });
  $('#camper-news').masonry({
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    percentPosition: true,
    gutter: 5
  });

});

I have set up a demo in codepen containing also the html and css as well

I've tried initializing masonry.js with jQuery following the documentation provided and it's not working for some reason. I've tried debugging by setting a breakpoint where I initialized masonry in my code and clicking "step over next function call". Although I'm still new on using the Chrome debugging tool, I do see it going through masonry.pkgd.min.js file so I think I've initialized correctly masonry. I've also looked at other questions related tomasonry.js on StackOverflow, but I haven't found the solution. I'm wondering whether it's because I've loaded the divs with jQuery.

score 1 · Accepted Answer · edited May 23 '17 at 12:30

the initialization is in wrong position:

$(document).ready(function() {
  $.getJSON("http://www.freecodecamp.com/news/hot", function(json) {
    var html = ""
    json.forEach(function(val) {
      html += "<div class='grid-item'>";
      html += "<a href='" + val.link + "' target='_blank'>";
      if (val.image === "" || val.image === "undefined") {
        html += "<img src='" + val.author.picture + "'>";
      } else {
        html += "<img src='" + val.image + "'>";
      }
      html += "</a>"
      html += "<p><a href='" + val.link + "' target='_blank'>" + val.headline + "</a></p>"
      html += "<p>" + val.rank + " points</p>";
      html += "</div>"
    });
    $("#camper-news").html(html);
    $(".grid-item:first").removeClass().addClass("grid-sizer")
    $('#camper-news').masonry({
      itemSelector: '.grid-item',
      columnWidth: '.grid-sizer',
      percentPosition: true,
      gutter: 5
    });
  });


});

http://codepen.io/anon/pen/LGBQJK

then you have to use image loaded plugin to be sure that all the images have been loaded:

Masonry images overlapping above each other

and this is the final solution: http://codepen.io/anon/pen/jWpZXa

Masonry.js not working when creating dynamic divs from jQuery

1 Answers1