PAGE TOP

要素をランダムに表示させるjQuery

各要素をページ更新毎にランダムに配置するjQueryプラグインです。

サンプル

※ページ更新毎に配置が変わります。(女性タレントが横一列に並ぶには何回F5を押さなければならないでしょうか…)

jQuery

$(function() {
	var arr = [];
	$("#sample div").each(function() {
		arr.push($(this).html());
	});
	arr.sort(function() {
		return Math.random() - Math.random();
	});
	$("#sample").empty();
	for(i=0; i < arr.length; i++) {
		$("#sample").append('<div>' + arr[i] + '</div>');
	}
});

「id=sample」内のdiv要素がページ更新毎にランダム位置表示されるという記述です。id部分を任意のものに書き換えてください。

HTML

<div id="sample">
<div><img src="画像のURL" alt="" /></div>
<div><img src="画像のURL" alt="" /></div>
<div><img src="画像のURL" alt="" /></div>
</div>

上記HTMLは画像の場合。あとはcssで適当に配置や装飾をすればOK。
php関数と組み合わせて、関連記事や新着情報などをランダムに表示させたい時などに重宝するプログラムです。


同じカテゴリのおすすめ記事

  • カテゴリー

  • 最近の投稿

  •