Jquery：Flickr + Masonry + ImagesLoaded。如何合并所有？

Question

我正在寻找将图像从 FlickrSet 加载到 bootrasp 3 容器中并使用 Masonry 调整大小。

我看到容器高度每次都等于 0。我认为我需要使用 imagesLoaded 但似乎 imagesLoaded 不起作用。简单来说，容器高度为 0。

这是代码，有人可以帮帮我吗？

var $gallery = $('#gallery');
if ($gallery.length!=0) {
    var url1    = 'http://api.flickr.com/services/feeds/photoset.gne?set=';
    var url3    = '&nsid=';
    var url5    = '&lang=en-us&format=';
    var url7    = '&jsoncallback=?';
    var set     = 'xxxxxx';
    var nsid    = 'yyyyyy@N06';
    var format  = 'json';
    var src;
    var finalUrl        = url1 + set + url3 + nsid + url5 + format + url7;
    $.getJSON(finalUrl,function(data){
        $.each(data.items, function(i,item){
            $('<img/>').attr({src : item.media.m.replace('_m.','.')}).appendTo($gallery);
        });
    });
            $gallery.imagesLoaded( function() {
                 $gallery.masonry();
            });
} // if

Answer 1

您需要在 ajax 回调中运行 masonry 和 imagesLoaded 方法（在图像添加到 DOM 之后）

   $.getJSON(finalUrl,function(data){
        $.each(data.items, function(i,item){
            $('<img/>').attr({src : item.media.m.replace('_m.','.')}).appendTo($gallery);
        });

        $gallery.imagesLoaded( function() {
             $gallery.masonry();
        });
    });