Javascriptで配列の中身をランダムに並び替える方法をメモします。
sort()メソッドを使用することで配列の順番を並び替えることができます。
引数がない場合はアルファベット順でソートされます。
今回はsort()メソッドに無名関数を指定し、random()メソッドで生成した値に
‘0.5’を引いた値で配列の順番をソートしています。
img.sort(
function() {
return Math.random() - 0.5;
}
);
正の値、負の値、0で比較し配列を並び替えます。
下記は画像をランダムに並べ替えて表示した際の方法です。
■ 複数の画像をランダム表示
【javascript,jQuery】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 配列を設定
var img = new Array("img1.jpg", "img2.jpg", "img3.jpg");
// 配列の中身をランダムに並び替える
img.sort(
function() {
return Math.random() - 0.5;
}
);
// 配列をループさせ、imgタグを出力
for(i = 0; i < img.length; i++) {
$("div#hoge").append('<img src="img/' + img[i] + '" />');
}
});
</script>
【HTML】
<div id="hoge"></div>
