title: Masonry items not reloaded when cliking ajax load more button
body: <p>Hi everyone i have one problem about masonry items.</p>
  
  <p>I have created this <strong><a href="http://codepen.io/shadowman86/pen/KwRwwd" rel="nofollow noreferrer">DEMO</a></strong> from <em>codepen.io</em></p>
  
  <p>In this demo you can see there is this javascript code:</p>
  
  <pre><code>$(window).load(function()
  {
  $( function() {
  var $container = $('.posts-holder');
      $container.masonry({
        isFitWidth: true,
        itemSelector: '.kesif-gonderi-alani'
      });
  
  });
  });
  </code></pre>
  
  <p>I show only 10 posts when a page is opened. If user want to show other 10 posts then user needs to click (show more button). I created this ajax function for show more posts.</p>
  
  <pre><code>$('.showmore').live("click",function(event) 
  {
  event.preventDefault();
  var ID = $(this).attr("id");
  var P_ID = $(this).attr("rel");
  var URL=$.base_url+'diger_fotograflar_ajax.php';
  var dataString = "lastid="+ ID+"&amp;profile_id="+P_ID;
  
  if(ID)
  {
  $.ajax({
  type: "POST",
  url: URL,
  data: dataString, 
  cache: false,
  beforeSend: function(){ $("#more"+ID).html('&lt;img src="wall_icons/ajaxloader.gif" /&gt;'); },
  success: function(html){
  $("div.posts-holder").append(html).each(function(){
     $('.posts-holder').masonry('reloadItems');
   });
  $("#more"+ID).remove();
  }
  });
  }
  else
  {
  $("#more").html('The End');// no results
  
  }
  
  return false;
  });
  </code></pre>
  
  <p>this code working when clicking showmore button <code>$('.posts-holder').masonry('reloadItems');</code> but collecting new posts in one place. But when I change the width of the page everything is improving.</p>
  
  <p><img src="https://i.stack.imgur.com/WcQTu.png" alt="enter image description here"></p>