title: How to append new image items with Masonry and AJAX without overlapping on window scroll
body: <p>I am trying to use Masonry to append new elements on my container on page scroll. I am trying to use AJAX for it and here is my UPDATED code:</p>
  
  <pre><code>                $(document).ready(function(){
                  var container = document.querySelector('#entries-content-ul');
                  imagesLoaded( container, function() {
                      new Masonry( container, {
                          itemSelector: '.box',
                          isAnimated:true,
                          animationOptions: {
                          duration: 700,
                          easing:'linear',
                          queue :false
                          }
                          });
                      });
                  var ajaxstart=1;
                  var tpage = 2;
                  function lastAddedLiveFunc()
                  {
                      $('div#lastPostsLoader').html('');
                      $.get("{/literal}{$baseurl}{literal}/votejson.php?page="+tpage, function(data){
                          if (data != "") {
                              $data = $( data );                      
                              $('#load_image').css('display','none');
                              var container = document.querySelector('#entries-content-ul'); 
                              var msnry;
                              // initialize Masonry after all images have loaded
                              $("#entries-content-ul").append(data).imagesLoaded( data, function() {
                              ajaxstart=1;
                              msnry = new Masonry( container );
                              });
  
  
                          }else{
                          ajaxstart=2;
                          }
                          $('div#lastPostsLoader').empty();
                      });
                  };
  });
  </code></pre>
  
  <p>New items are being added to the page on document scroll. I am unable though to append these new items to the current masonry layout. This is why I am creating a second masonry container. On the first new set ot items, they are being generated on the top of the page and then, they move down to the bottom in a quite ugly way. After that all new Items are being added correctly, sometimes they overlap each other, sometimes not, I guess non cached images overlap. What I want to achieve is to be able to find the ".box" html item from <code>data</code> and then append it to the existing masonry container. I have been struggling to do this for some time now after reading all related questions here, but still no success.</p>