Creating Masonry items with jQuery

Question

I need to be able to create Masonry items in jQuery rather than HTML. However, the below fails to output anything. By contrast, the commented out HTML equivalent works perfectly.

Is there a workaround for this?

HTML:

<div id="container" class="feed">
    <!-- this would work fine:
        <div class="item">hey</div>
        <div class="item">hi</div>
        <div class="item">hello</div>
    -->
</div>

jQuery:

$("div.feed").html("<div class='item'>hey</div><div class='item'>hi</div><div class='item'>hello</div>");

EDIT

To be clear, that jQuery is appending what it's supposed to where the commented out HTML is. My issue is making Masonry respond to that - the three divs should be side-by-side.

Answer 1

Masonry lays out once and only once unless you bind resize to it using either one of

msnry.bindResize()
// or with jQuery
$container.masonry('bindResize')

In which case, when the window is resized, the Masonry instance will reload itself by recollecting the items and laying them out again. So there are two options to your problem.

• Call window.resize() after adding items if you've binded resize.
• Use masonry's appended method instead (passing the elements as a fragment): http://masonry.desandro.com/methods.html#appended

Edit:
You should really use the appended method. Here's an example using your html elements.

var $fragment = $("<div class='item'>hey</div> \
    <div class='item'>hi</div><div class='item'>hello</div>");
$('div.feed').append($fragment).masonry('appended', $fragment);  

JSFiddle: http://jsfiddle.net/5xfpF/