如何通过API在对齐图库中显示Flickr图像？

Question

我需要使用Miromannino对齐图库（http://miromannino.github.io/Justified-Gallery/），但我需要它来显示从Flickr检索的图像。

代码终于下来使用Ajax通过API retreiving从Flickr照片：

$.ajax({ 
     url: "https://api.flickr.com/services/rest/", 
     data: { 
      method: "flickr.photos.search", 
      api_key: "671aab1520e2cb69e08dd36a5f40213b", 
      tags: "beach,fashion", 
      format: "json", 
      nojsoncallback: 1 
     }, 
     success: function (response) { 
      $.each(response.photos.photo, function (index, value) { 
       $("#mygallery").append("<div><img src='http://farm" + value.farm + ".staticflickr.com/" + value.server + "/" + value.id + "_" + value.secret +".jpg'></div>"); 
      }) 
     } 
    }); 

但我就是不明白如何在对齐库添加。

Answer 1

JustifiedGallery期望每个图像都包含在<a>标签中。最后，你必须在最后打电话.justifiedGallery()。下面是修改后的代码：

$.ajax({ 
    url: "https://api.flickr.com/services/rest/", 
    data: { 
     method: "flickr.photos.search", 
     api_key: "671aab1520e2cb69e08dd36a5f40213b", 
     tags: "beach,fashion", 
     format: "json", 
     nojsoncallback: 1 
    }, 
    success: function (response) { 
     $.each(response.photos.photo, function (index, value) { 
      console.log(value); 
      var url = 'http://farm' + value.farm + '.staticflickr.com/' + value.server + '/' + value.id + '_' + value.secret + '.jpg'; 
      var a = $('<a>').attr({href: url}); 
      var img = $('<img>').attr({src: url}); 
      a.append(img); 
      $("#mygallery").append(a); 
     }); 
     $('#mygallery').justifiedGallery(); 
    } 
}); 

这里，它是在行动：https://jsfiddle.net/tghw/raf1m6bL/