Question

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

Working Example: 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;

更新后的条款： http://jsfiddle.net/9pzhh9z5/5/

Answer 2

如果每个帖子只有一张照片，那么您可以选择以下内容：

var r = Math.floor(Math.random() * data.response.posts.length);
var post = data.response.posts[r];

然后为你设置背景：

$('.background').css({
    "background-image": "url(" + post.photos[0].original_size.url + ")"
});

不需要$.each个循环。如果每个帖子可以包含多张照片，那么从随机帖子中选择随机照片并不困难。

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

Tumblr API jQuery随机图像

2 个答案: