Using Json to load all images from server, and displaying them Masonry

Question

What I'm trying to do is get 20 or so images from a folder on the server and display them using masonry.desandro and once scrolled to the bottom it will load another set of 20 images. Just like pinterest. Currently it does load the images 20 at a time, the only problem I'm having is the first 20 display Masonry but when the next 20 load they aren't displaying Masonry

HTML

<div class="grid">
</div>

Json

$(document).ready(function() {

      // The max number of images to be loaded at a time.
      var limit = 16;

      // JSON data will be assigned to this
      var images = "";

      // to remember where in JSON we are
      // initialize to the value of limit - so that we can load in images
      // before page scroll.
      var currentIndex = limit;

      // When there are fewer than `limit` images left, this
      // value will be the difference between the current index
      // and the length of the images array.
      var stop = limit;

      var grid = $(".grid");

      // Make a GET request to the api
      $.getJSON("***********************/newsite/api.php", function(data) {

        // save the data to be used later.
        images = data.weddingCakes;
        console.log(data);
      })

      // create the first round of images.
      .done(function() {
        var html = "";
        for (var i = 0; i < limit; i++) {
          html += '<div class="grid-item"><img src="' + images[i] + '"></div>';
        }
        grid.append(html)

        .masonry({
            gutter: 3,
            itemSelector: '.grid-item',
            animate: true
        });
        console.log("masonry")
      })
      .error(function() {
          console.log("error");
      });

      $(document).scroll(function() {
        // get the scoll position with support for IE
        // see http://jsbin.com/egegu3/6/edit?html,js,output
        // for original code.
        var totalHeight, currentScroll, visibleHeight;
        if (document.documentElement.scrollTop) {
          currentScroll = document.documentElement.scrollTop;
        } else {
          currentScroll = document.body.scrollTop;
        }
        totalHeight = document.body.offsetHeight;
        visibleHeight = document.documentElement.clientHeight;

        // only load more images if the scroll bar is at the bottom
        $(window).scroll(function() {
            if($(window).scrollTop() + $(window).height() == $(document).height()) {
              var diff = images.length - currentIndex;
              // if the difference is > 0 then there are more images in the array
              if (diff > 0) {
                stop = diff > limit ? limit : diff;
                getImages(currentIndex, stop);
                currentIndex += stop;
              }

              // otherwise, reset the index before calling getImages()
              else {
                currentIndex = 0;
                stop = diff > limit ? limit : diff;
                getImages(currentIndex, stop);
                currentIndex += stop;
              }
            }
        });
      });

      // gets the path for each image from index to stop
      function getImages(index, stop) {
        var html = "";

        // create the img tags.
        for (var i = index; i < index + stop; i++) {
          html += '<div class="grid-item"><img src="' + images[i] + '"></div>';
        }
        var str = $(html);
        grid.append(html).masonry("appended", str); 
      }
    });

My JSfiddle

Answer 1

you were almost correct just missed a small part while reading documentation, here while appending elements you need to append HTML elements and pass same to the masonry function.

You were adding string to append and later on you were passing element to the masonry, Also this code -> var str = $(html); returns Array of HTML elements rather than string, so you need to add these elements to the grid and pass it to masonry

so your little change would be...

  // gets the path for each image from index to stop
  function getImages(index, stop) {
    var html = "";

    // create the img tags.
    for (var i = index; i < index + stop; i++) {
      html += '<div class="grid-item"><img src="' + images[i] + '"></div>';
    }
    var str = $(html);
    grid.append(str).masonry("appended", str); // This line is a change
  }

I have dummy fiddle for this as well