Using jquery append with masonry

Question

i am using this:

$('#loadmore').click(function() {
$.ajax({
   url: 'includes/loadmorebuilds.php',
   success: function(html) {
      $("#content").append(html);
   }
});
});

To load more items into a container which is sorted with jquery masonry. However when they are appended they do not follow the rest of the items and break the masonry style.

The new items work as a masonry layout, but they just dont continue on from the first ones. They start there own line.

I have searched and found this information on their site:

msnry.appended( elements )
// or with jQuery
$container.masonry( 'appended', elements )

I just need help modifying my original script to make the appended items work with masonry.

thanks, craig.

Never ever [duplicate your own question](http://stackoverflow.com/q/19191723/367456) only because you're not yet confident with the answers. Instead consult the help section and learn about what more work and efforts you can do to improve your research, writing code examples for reproduction and asking questions. Then use the *edit* button and improve your original question. Otherwise you only see downvotes and you drive potential users who want to help away. — hakre, Oct 19 '13 at 12:03

score 1 · Answer 1 · answered Oct 04 '13 at 13:25

What you can do is append your incoming html to the masonry container and then 'inform' masonry about it. Take a look at this fiddle. So in your example, your success callback could look something like:

//...      
success: function(html) {
    var content = $("#content"),
        elements = $(html); 
        // would make sense to reference your masonry container through 
        // a variable used earlier in the script, but that should work too
        content.append(html).masonry('appended', elements);
}
//...

There are some other ways to do this, but it should suffice for what you described. What's important is that you pass elements that are of 'Type: Element, NodeList, or Array of Elements', so you might want to check what you're actually receiving.

Using jquery append with masonry

1 Answers1