Jquery: Flickr + Masonry + ImagesLoaded. How merge

问题:

I'm looking for loading images from a FlickrSet, into a bootrasp 3 container and resizing with Masonry.

I see that container height is everytime equal to 0. I think that I need to use imagesLoaded but seems that imagesLoaded doesnt' work. Simply, container height is 0.

This is code, someone could help me?

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

回答1:

You need to run your masonry and imagesLoaded methods inside the ajax callback (after the images have been added to the 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();
        });
    });