Masonry items not reloaded when cliking ajax load more button

Question

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()
{
$( function() {
var $container = $('.posts-holder');
    $container.masonry({
      isFitWidth: true,
      itemSelector: '.kesif-gonderi-alani'
    });

});
});

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.

$('.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+"&profile_id="+P_ID;

if(ID)
{
$.ajax({
type: "POST",
url: URL,
data: dataString, 
cache: false,
beforeSend: function(){ $("#more"+ID).html('<img src="wall_icons/ajaxloader.gif" />'); },
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;
});

this code working when clicking showmore button $('.posts-holder').masonry('reloadItems'); but collecting new posts in one place. But when I change the width of the page everything is improving.

Franek

are your divs all having the same height? If so, try explicitly setting a height value. – Rick

@Rick no answer image div is example. The real posts not have same height. But developer console code is same like my question image. – Franek

try changing your code as : $("div.posts-holder").append(html) ; $('.posts-holder').masonry('reloadItems'); – Rick

@Rick Nothing changed The same problem continues. – Franek

Answer 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.

Arlaarlan

Thanks for your answer. I still try this before and now but nothing changed the same problem will continue. – Franek

@innovation As you can see it, it's working on this jsfiddle maybe you forgot to tell us more details about your code because I used your code to do the test. – Arlaarlan

@innovation I tested it on codepen and it's working. – Arlaarlan

i send you an email can you check it for me ? – Franek

Answer 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

Cole

Nothing changed the same problem continues. – Franek

in the demo the elements are adding in correct position right... when u get new set of elements wrap them using jquery and append – Cole

I know [MASONRY](masonry.desandro.com/methods.html) link. Your small demo working fine but i still try it but nothing changed. Everything is same.... So you said all height is 300px what is that ? Did you see my DEMO – Franek

give any height you want... i just copied that div from your code thats it...besides there is no show more script in your codepen – Cole

the original page looks like this please click HERE – Franek

you need to wrap the elements from success(html) to create jquery objects as i have done . That might be problem – Cole