シャッフル画像機能を実装する

Question

シャッフル画像機能を開始する方法についてアドバイスを探していますので、divボックスに6画像atmがあり、シャッフルできるようにする関数が必要です。私は別の部門に画像を置くべきでしょうか？任意のヘルプやサンプルコードをいただきありがとうございます。

Answer 1

後は、jQueryのソリューションです。バニラJavaScriptを使用しても同じ結果が得られますが、余分なコード行はほとんど必要ありません。

<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

Answer 2

a memory card gameのようなものを実装しましたので、おそらくそのヒントを得ることができます。私の.jsファイルで 'shuffle'のリソース検索を行うだけで、どうやってやったか分かります。メモリから、私は元々はすべての画像をdivに入れ、シャッフル機能でそれらを移動させました。私は後で、後でイメージ要素を生成する代わりに、一連のURLをシャッフルし始めたと思います。

私はCa-Phun Ungの「Shuffle」JQueryプラグインを使用しました（しかし、私は内部の動作をより良く理解するために自分のバージョンを書き直したと思いますが）。あなたはそれについても有益な情報を見つけるかもしれません。 JQuery Shuffle

Answer 3

を参照してください。

var divs = $('selector to get all divs'); // This could be $('img'); 

function shuffle(divs, iterations) { 
    var size = divs.size(); 

    for(var i = iterations; i > 0; i--) { 
     // Pick two divs at random 
     var div1 = divs[Math.floor(Math.random() * size)], 
      div2 = divs[Math.floor(Math.random() * size)]; 

     // Ensure they are different divs 
     if(div1.is(div2)) { 
     continue; 
     } 

     // Swap the two divs 
     div1.clone().insertAfter(div2); 
     div2.detach().insertAfter(div1); 
     div1.detach(); 
    } 
}; 

shuffle(divs, 1000); 

あなたがdivs.hideを置く場合は、スラッシングが表示されないように、これはおそらく）divs.show（そして、）（良くなりますが。しかし、多分それはあなたが欲しいものですか？そこに遅れを入れて、jQueryのアニメーション機能を使って気に入ってもらえますか？この特定の解決策では、DOM内のimgの位置が場所を決定する必要があります。より複雑な解決策は、ループ中にCSSの位置を入れ替えることです。

var savedLeft = div1.css("left"), 
    savedTop = div1.css("top"); 

div1.css("left", div2.css("left")); 
div1.css("top", div2.css("top")); 
div2.css("left", savedLeft); 
div2.css("top", savedTop); 

私は実際にこれをまだ試していないが、それはここからになります：P