dynamic DOM masonry jQuery plugin
<p>I am creating <code>dom</code> elements by parsing <code>tumblr</code>'s json file.<br/>
After the images are loaded, i would like to apply a <a href="http://masonry.desandro.com/docs/intro.html" rel="nofollow">jQuery plugin Masonry</a> to tighten up the image grid.<br/><br/>
Heres my attempt but it doesnt seem to be responding<br/>
Any help would be greatly appreciated, thank you.</p>

<pre><code>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('&lt;div class="box"&gt;&lt;a href="temp.php?var='+i+'"&gt;&lt;img src="'+img+'" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;');
    });
});


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

<p>or this</p>

<pre><code>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('&lt;div class="box"&gt;&lt;a href="temp.php?var='+i+'"&gt;&lt;img src="'+img+'" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;', function(){
                    container.imagesLoaded( function(){
                        container.masonry({
                                itemSelector: '.box',
                                columnWidth : 400
                        });
                });
        });
});
</code></pre>
