動態DOM石工jQuery插件

Question

我通過解析tumblr的json文件來創建dom元素。
加載圖像后，我想應用jQuery插件Masonry來收緊圖像網格。

這是我的嘗試，但似乎沒有反應
任何幫助將不勝感激，謝謝。

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
    });
});

或這個

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);

再也不用擔心！