Question

我在页面上有3到4个div，我想在每次页面加载时随机化一个图像列表。在下面的示例中，这可以正常工作，但我发现有时您可能会得到3个相同的图像或两个相同的图像。是否有一个很大的逻辑可以用来避免这种情况？

HTML

<div class="wrap">

  <div class="divide-img"></div>
  <div class="divide-img"></div>
  <div class="divide-img"></div>

</div>

jQuery的：

$(document).ready(function() {
    var images = ['http://lorempixel.com/400/200/sports/1', 'http://lorempixel.com/400/200/sports/2', 'http://lorempixel.com/400/200/sports/3', 'http://lorempixel.com/400/200/sports/4'];

    $('.divide-img').each(function(){
        $(this).css({'background-image': 'url(' + images[Math.floor(Math.random() * images.length)] + ')'});  
    });
});

任何帮助/指导都将不胜感激。

Link to working example

Answer 1

而不是你的方法，我会首先洗牌初始的图片数组，然后将图片分配给div，以便它们出现在混洗数组中。

在javascript中快速搜索shuffle方法后，我找到了一篇文章（How can I shuffle an array?），展示了如何创建这样的函数

function shuffle(o){ //v1.0
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

现在，一旦你有了shuffle方法，你的实现可能看起来像这样

$(document).ready(function() {
    var images = ['http://lorempixel.com/400/200/sports/1', 'http://lorempixel.com/400/200/sports/2', 'http://lorempixel.com/400/200/sports/3', 'http://lorempixel.com/400/200/sports/4'];
    images = shuffle(images);

    $('.divide-img').each(function(i){
        $(this).css({'background-image': 'url(' + images[i] + ')'});  
    });
});

Answer 2

你需要随机化数组中元素的顺序，然后循环它。

检查How to randomize (shuffle) a JavaScript array?如何随机化阵列。

Answer 3

您需要删除已使用的图片：

 $('.divide-img').each(function(){
      var rnd = Math.floor(Math.random() * images.length)
        $(this).css({'background-image': 'url(' + images[rnd] + ')'}); 
      images.splice(rnd, 1)
    });

Answer 4

您可以在使用时删除图像。

$(document).ready(function() {
    var images = ['http://lorempixel.com/400/200/sports/1', 'http://lorempixel.com/400/200/sports/2', 'http://lorempixel.com/400/200/sports/3', 'http://lorempixel.com/400/200/sports/4'];

    $('.divide-img').each(function(){
        var index = Math.floor(Math.random() * images.length)
        $(this).css({'background-image': 'url(' + images[index] + ')'});
        images.splice(index);
    });
});

在多个div上随机化背景图像，而不显示相同的图像

4 个答案: