jQuery Masonry and Ajax Append Items?

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

Answer 1

For Masonry v3.2.2 (latest at the time of this post), this is what works:

Assuming newHtml is a string like this:

item 1

item 2

item 3

You process it like this:

$.get(apiUrl, function(newHtml) {
    var textArr = newHtml.split("");
    var elArr = [];
    $.each(textArr, function(i,v) {
        if (v) {
            elArr.push($(v)[0]);
        }
    });
    $(this).append(elArr);
    $container.waitForImages( function() {
        $container.masonry('appended', elArr);
    });
}

Took me 2 hours to find out this!