動態DOM砌體jQuery插件

Question

我通過解析tumblr的json文件來創建dom元素。
加載圖像後，我想應用jQuery plugin 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); 

再也不用擔心了！