Tumblr API jQuery随机图像

Question

我想在div元素中将随机图像作为背景.
我使用tumblr API从tumblr获取图像.
以下代码有效,但只获取找到的最后一个图像,如何从数组中获取随机图像？

工作示例:jsfiddle.net/StevendeJong/9pzhh9z5/2

$(document).ready(function (){
    var link = "http://api.tumblr.com/v2/blog/www.unsplash.com/posts?";
    $.ajax({
        type: "GET",
        url : link,
        dataType: "jsonp",
        data: {
            api_key: "ClAjag2DrKwJhbFY1aAAwqBUxEFBEOBwc7AzMwXlcaNlp3gZte"
        }
    }).done(function( data ) {

        $.each(data.response.posts, function(){

            var _photos = this.photos;

            $.each(_photos, function(){
                $('.background').css({
                    "background-image": "url(" + this.original_size.url + ")"
                });
            });
        });
    });
});

Answer 1

请试试这个:

当您在每个列表中进行迭代时,您将获得最终结果.

看到更新的小提琴:

http://jsfiddle.net/9pzhh9z5/3/

$(document).ready(function () {
    var link = "http://api.tumblr.com/v2/blog/www.unsplash.com/posts?";
    $.ajax({
        type: "GET",
        url: link,
        dataType: "jsonp",
        data: {
            api_key: "ClAjag2DrKwJhbFY1aAAwqBUxEFBEOBwc7AzMwXlcaNlp3gZte"
        }
    }).done(function (data) {

        var url = $.rand(data.response.posts);
        url = url.photos[0].original_size.url;
        console.log(url);
        console.log($.rand(data.response.posts));
        $('DIV.background').css('background-image', 'url(' + url + ')');;

        });
    });

我正在使用此函数随机化数组:

//random function. 
(function ($) {
            $.rand = function (arg) {
                if ($.isArray(arg)) {
                    return arg[$.rand(arg.length)];
                } else if (typeof arg == "number") {
                    return Math.floor(Math.random() * arg);
                }
            };
        })(jQuery);

更新 要获得1280大小(如果可用),您可以添加此项检查:

 var url = $.rand(data.response.posts);
 var alt = url.photos[0].alt_sizes[0];
 url = alt.width == 1280 ? alt.url : url.photos[0].original_size.url;

更新的FIDDLE:http: //jsfiddle.net/9pzhh9z5/5/