Masonry Items Not Reloaded When Cliking Ajax Load More Button

Hi everyone i have one problem about masonry items. I have created this DEMO from codepen.io In this demo you can see there is this javascript code: $(window).load(function() { $(

Solution 1:

I think that you can use $container.masonry(); after adding your elements, like this :

$("div.posts-holder").append(html).each(function(){
    $('.posts-holder').masonry('reloadItems');
});

$container.masonry();

You can see it working here.

Hope that can help.

Solution 2:

you have to use the appended method of masonry ... otherwise how would it know that you have added any new element.

Adding the elements simply wont align them as masonry doesnt have any event listner for new element added.

  var el = $('<div class="kesif-gonderi-alani" style="height:300px;"></div>') 
  $container.masonry().append( el ).masonry( 'appended',el );  

Hers is small demo on codepen http://codepen.io/knaman2609/pen/xbJMRY

Click on the button to append elements dynamically

http://masonry.desandro.com/methods.html