dynamic DOM masonry jQuery plugin

Question

I am creating dom elements by parsing tumblr 's json file.
After the images are loaded, i would like to apply a jQuery plugin Masonry to tighten up the image grid.

Heres my attempt but it doesnt seem to be responding
Any help would be greatly appreciated, thank you.

var container = $('#output');
$.getJSON("http://mydomain.tumblr.com/api/read/json?callback=?", function(data) { 
    $.each(data["posts"], function(i){
        var img = data["posts"][i]["photo-url-400"];
        container.append('<div class="box"><a href="temp.php?var='+i+'"><img src="'+img+'" alt="" /></a></div>');
    });
});


//container.live('imagesLoaded', function(){
container.imagesLoaded( function(){
    container.masonry({
        itemSelector: '.box',
        columnWidth : 400
    });
});

or this

var container = $('#output');
$.getJSON("http://mydomain.tumblr.com/api/read/json?callback=?", function(data) { 
        $.each(data["posts"], function(i){
                var img = data["posts"][i]["photo-url-400"];
                container.append('<div class="box"><a href="temp.php?var='+i+'"><img src="'+img+'" alt="" /></a></div>', function(){
                    container.imagesLoaded( function(){
                        container.masonry({
                                itemSelector: '.box',
                                columnWidth : 400
                        });
                });
        });
});

Answer 1

// Nothing changed here:
var container = $('#output');
$.getJSON("http://mydomain.tumblr.com/api/read/json?callback=?", function(data) { 
    $.each(data["posts"], function(i){
        var img = data["posts"][i]["photo-url-400"];
        container.append('<div class="box"><a href="temp.php?var='+i+'"><img src="'+img+'" alt="" /></a></div>');
    });
});

// Now, do this:
container.masonry({
    itemSelector: '.box',
    columnWidth : 400
});
var masonryUpdate = function() {
    setTimeout(function() {
        container.masonry();
    }, 500);
}
$(document).on('click', masonryUpdate);
$(document).ajaxComplete(masonryUpdate);

Never worry about it again!