Question

I am trying to use some ajax and the jQuery Masonry plugin to add some items – but for some reason the new items aren’t getting the masonry applied ?

I’m using

jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        if (html.length > 0) {
            jQuery("#content").append(html).masonry( 'appended', html, true );
        }
    });
});

However the items that are appended subsequently don’t have the class="masonry-brick" applied which means that they stuff up completely the positioning ?

Answer 1

Had a similar problem and instead used the following line (converted for your code). Sorry, I don’t recall where I found it.

In your code replace this:

jQuery("#content").append(el).masonry( 'appended', el, true );

With this:

jQuery("#content").append(el).masonry( 'reload' );

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