Question

我目前正在实施Jribbble将我的Dribbble镜头投入到我的新投资组合中。我已经把它设置为可以拉入我已分配到水桶的所有镜头 - 太棒了！

我想做的另一件事就是能够将返回的结果随机化，以确保我的作品能够很好地传播。

目前的代码是：

＆＃13;

$.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(''));
            });

＆＃13;

任何想法我怎么会这样做？

我也曾尝试将结果随机化后使用：

＆＃13;

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]);
  }
};

＆＃13;

但我只收到这个错误：

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调用返回最后十张图像，那么它将在这些图像之间进行随机播放。

Randomise Dribbble API调用结果

1 个答案: