Implementing shuffle images function

Question

Im looking for some advice on how to start a shuffle image function, so I have 6 images atm in a div box and I want a function that allows them to shuffle around, how should I start?? Should I put the images in a separate div as well? any help or example code appreciated, thanks

Answer 1

Following is a jQuery solution. You can achieve same results using vanilla JavaScript but it will require few extra lines of code.

<div id="deck">
  <div><img src="" /></div>
  <div><img src="" /></div>
  .
  .
  .
</div>

// Fisher–Yates Shuffle (Knuth variant)
// To shuffle an array a of n elements (indices 0..n-1):
//   for i from n - 1 downto 1 do
//        j <- random integer with 0 <= j <= i
//        exchange a[j] and a[i]

// jQuery specific:
// 1) remove elements from DOM and convert them into a native JavaScript array
// 2) apply algorithm
// 3) inject the array back to DOM

var a = $("#deck > div").remove().toArray();
for (var i = a.length - 1; i >= 1; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var bi = a[i];
    var bj = a[j];
    a[i] = bj;
    a[j] = bi;
}
$("#deck").append(a);

Demo here