1

のjsonファイルdomを解析して要素を作成しています。画像が読み込まれた後、 jQueryプラグインMasonryを適用して画像グリッドを強化し たいと思います。 これが私の試みですが、応答していないよう です。助けていただければ幸いです。ありがとうございます。tumblr



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

1 に答える 1

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

もう心配する必要はありません。

于 2014-04-15T13:27:21.520 に答える