jQuery:Flickr +石工+ ImagesLoaded.如何合并全部? [英] Jquery: Flickr + Masonry + ImagesLoaded. How merge all?

问题描述

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

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

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

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

推荐答案

您需要在ajax回调内部运行masonry和imagesLoaded方法(在将图像添加到DOM之后，在 >)

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

这篇关于jQuery:Flickr +石工+ ImagesLoaded.如何合并全部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！