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/