동적 DOM 벽돌 jQuery 플러그인

Question

tumblr의 json 파일을 구문 분석하여 dom 요소를 만듭니다.
이미지가로드 된 후 jQuery plugin Masonry을 적용하여 이미지 그리드를 강화하고 싶습니다.

Heres 내 시도가 있지만 응답하지 않는 것 같습니다
도움을 주시면 감사하겠습니다.

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

다시 그것에 대해 걱정하지 마십시오!