javascript - 随机化 Dribbble API 调用结果

Question

我目前正在实现 Jribbble将我的运球投篮纳入我的新投资组合中。我已经将其设置为能够拉入我分配给存储桶的所有镜头 - 太棒了!

我想做的另一件事是能够随机化返回的结果，以确保我的工作得到良好的传播。

当前代码是:

$.jribbble.setToken('3f99156fa1530d27432a9df8eb315e861d6b2fb4f59acaa210da8962e1427cf2');

            $.jribbble.buckets(333465).shots({per_page: 12}).then(function(res) {
                var html = [];

                res.forEach(function(shot) {
                    html.push('<li class="shots--shot">');
                    html.push('<a href="' + shot.html_url + '" target="_blank">');
                    html.push('<img src="' + shot.images.normal + '">');
                    html.push('</a></li>');
                });

                $('.shots').html(html.join(''));
            });

有人知道我该怎么做吗？

我还尝试过在调用结果后将结果随机化:

window.onload = function() {
  var ul = document.querySelector('.shots');
  for (var i = ul.children.length; i >= 0; i--) {
    ul.appendChild(ul.children[Math.random() * i | 0]);
  }
};

但我只收到这个错误:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

非常感谢任何帮助!

Answer 1

采用 SO-Thread How to randomize (shuffle) a JavaScript array? 中找到的 shuffle 函数

并将其添加到 JavaScript 中的某个位置。然后在迭代结果之前调用该函数:

function shuffle(array) {
   // [...] shuffle function  
}

$.jribbble.buckets(333465).shots({per_page: 12}).then(function(res) {
   var html = [];

   // shuffle the results
   res = shuffle(res);

   res.forEach(function(shot) {
       html.push('<li class="shots--shot">');
       html.push('<a href="' + shot.html_url + '" target="_blank">');
       html.push('<img src="' + shot.images.normal + '">');
       html.push('</a></li>');
   });

   $('.shots').html(html.join(''));
});

请记住，这只能打乱从 api 返回的结果。因此，如果您有 100 张图像并且 api 调用返回最后 10 张照片，那么它将在这些图像之间随机播放。