调用Flickr API展示相册时无法按相册名+对应照片顺序显示求助

核心问题原因 #

• 你当前的代码把所有相册名称统一追加到全局的#albumname容器，所有照片统一追加到全局的#flickr容器，结构上天然就会出现相册名集中展示、照片集中展示的效果
• 调用flickr.photosets.getPhotos接口的AJAX请求是异步的，请求响应耗时不固定，即便调整结构也可能出现后遍历的相册先加载完成的情况，打乱展示顺序

修复后的完整代码 #

<html>
<body height="400" width="345">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=d4484e060a112d188a27a51ea64f427e&user_id=193275648%40N03&format=json&nojsoncallback=1",
  "method": "GET",                                               
} 
$.ajax(settings).done(function (data) {
  $.each( data.photosets.photoset, function( i, gp ) {
    // 动态创建当前相册的专属容器
    var albumBox = $('<div class="album-box"></div>');
    // 插入当前相册名称
    albumBox.append('<h2>' + gp.title._content + ' Gallery</h2>');
    // 创建当前相册的照片容器
    var photoBox = $('<div class="photo-list"></div>');
    albumBox.append(photoBox);
    // 把当前相册容器插入页面
    $('body').append(albumBox);

    var id = gp.id; 
    var settings1 = {
      // 如果需要严格保证相册按返回顺序加载，可把async改为false
      "async": true,
      "crossDomain": true,
      "url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=d4484e060a112d188a27a51ea64f427e&photoset_id="+ id +"&user_id=193275648%40N03&format=json&nojsoncallback=1",
      "method": "GET",                                               
    } 
    $.ajax(settings1).done(function (data) {
      $.each( data.photoset.photo, function( i, gpr ) {
        var farmId = gpr.farm;
        var serverId = gpr.server; 
        var id = gpr.id; 
        var secret = gpr.secret;
        // 照片只插入到当前相册的照片容器中
        photoBox.append('<center><img style="border:1px solid #000000"  src="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg"/><br><br></center>');
      });
    }); 
  });
}); 
</script>
</body>
</html> 
<style>
img{
  width: auto;
  height: 80%;
  max-width: 100%;
  overflow: hidden;
  border-width: 1px;
  border-color: Black;
  padding: 5px;
}
.album-box {
  margin-bottom: 30px;
}
</style>

修改说明 #

• 移除了全局的相册名、照片固定容器，改为遍历每个相册时动态生成专属容器，确保每个相册的名称和照片是绑定在同一个父容器内的
• 每个相册的照片请求完成后，只会把照片插入到对应相册的专属容器，不会和其他相册内容混淆
• 新增了.album-box的样式控制相册之间的间距，展示更清晰
• 如果需要严格保证相册按接口返回的顺序加载，只需要把settings1里的async参数改为false即可，缺点是会轻微阻塞页面渲染，你可以根据实际需求选择。

内容的提问来源于stack exchange，提问作者kasindi mahesh