Случайное изображение Проблемы с сеткой

Question

Я создал сетку изображений (в основном, используя бутстрап), и внутри этой сетки 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 и провел последние два дня, пытаясь все виды вещей, которые я но это самое близкое решение, которое я смог выполнить.

EDIT: Я сдался. Теперь я использую это, а некоторые js занимают позицию над ним. http://tympanus.net/Development/AnimatedResponsiveImageGrid/index2.html

Все еще интересуется ответом, хотя, для будущего ref.

Answer 1

Вы можете проверить с этой версией проблема, которую я обнаружил, что иногда this объект повторов и он изменяет ГКЗ того же образ ...

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