Tumblr API jQuery 随机图片答案

【问题标题】：Tumblr API jQuery random imageTumblr API jQuery 随机图片
【发布时间】：2014-10-12 18:50:52
【问题描述】：

我想要一个随机图像作为 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 + ")"
                });
            });
        });
    });
});

【问题讨论】：

标签： jquery random tumblr

【解决方案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/

【讨论】：

另外 - 您应该考虑使用该数组中的替代照片尺寸 - 返回的一些原始尺寸照片很大，加载到后台会有点慢。
如果你愿意，我可以修改小提琴，使其使用更小的图像（检查你的控制台日志）。
这很好用，我怎样才能始终从alt sizes 获得 1280 尺寸，如果该尺寸不可用，则 original_size？
嗨@StevendeJong - 我已经更新了答案+小提琴：jsfiddle.net/9pzhh9z5/5 如果你想要 1280 或更高，请将 == 更改为 >

【解决方案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/

【讨论】：

@StevendeJong：什么“不起作用”？它works fine