javascript - 动态 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);

再也不用担心了!