jquery - 随机图像网格问题

Question

我创建了一个图像网格(主要使用 bootstrap)，该网格内有 3 行，每行 5 个图像。我希望它们一次随机加载一个，但在使用所有图像之前不会重复。我现在有一个包含 32 张图像的数组。

我已经用我当前的代码( http://codepen.io/msbtterswrth/pen/MyZXZQ?editors=0010 )创建了一个简化的测试用例，它几乎已经存在，但有一些警告。您会注意到，在它触发后，它们都会转到同一个图像(不知道为什么)，但是如果您更改以下几行，它会起作用，但会频繁重复。

更改此

var random_no = Math.floor(Math.random()*total_images)+1

至

var random_no = Math.floor(Math.random()*32)+1

我不太擅长 javascript/jquery，并且在过去的两天里尝试了我遇到的各种事情，但这是我能够完成的最接近的解决方案。

编辑:我放弃了。我现在使用这个，一些js确实将标题放在它上面。 http://tympanus.net/Development/AnimatedResponsiveImageGrid/index2.html

但仍然对答案感兴趣，以供将来引用。

Answer 1

您可以使用此版本进行测试，我检测到的问题是有时 this 对象会重复，并且它会更改同一图像的 src...

setInterval(function () {
    var $flippers = $("section.culture img"),
    qtFlippers = $flippers.length;

    $flippers.eq(Math.floor(Math.random()*qtFlippers)).randomize({
        path : 'http://centretek-drupal.centreteksolutions.net/sites/default/files/images/culture-'
    });
}, 500);


/*jQuery RANDOMIZER*/
(function($){

  $.fn.randomize = function(options){

    var new_src,
    settings = $.extend({
                path : 'http://centretek-drupal.centreteksolutions.net/sites/default/files/images/culture-'
            }, options);
    count = 0,
    src_storage = [];

    /*this.each(function(){
        total_images = get_prop($(this));
    });*/


      return this.each(function(){
    new_src = generate_src();
    //console.log($("img")[1].src);
    for(i=0; i<$("img").length; i++){
        if($("img")[i].src == new_src){
        //if(document.getElementsByTagName("img")[i].getAttribute("src") == new_src){  
           new_src = generate_src();
          i = 0;
        } 
    }
    this.setAttribute("src",new_src);
});

    // function to check for images that maybe repeated .
    /*function get_prop(current){
        var current_src = current.attr('src');
        if ($.inArray(current_src , src_storage) === -1) {
            src_storage.push(current_src);
        }
        return src_storage.length;
    }*/

    //function to generate a random number
    function generate_random(){
        var random_no = Math.floor(Math.random()*32)+1
        return random_no;
    };

    // function to generate a new src for the selected images
    function generate_src(){
        var store_random = generate_random(),
            new_src;
        if (store_random >= 10) {
            new_src =  'http://centretek-drupal.centreteksolutions.net/sites/default/files/images/culture-'  + store_random + '.jpg';
        } else{
            new_src = settings.path + store_random + '.jpg';
        }
        return new_src;
    }
  }

}(jQuery));