ページ読み込み時に、リストの項目をランダムに入れ替える。

ページ読み込み時や再読み込みした時に、リストの項目をランダムに入れ替える。

デモページを表示

CSS

補足

• flexbox の order プロパティで順番を入れ替えるので、リストに flexbox のプロパティを設定している。
• order プロパティは、読み込み時や再読み込み時に jQuery で設定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 最初に重複しない整数の乱数を配列に用意し、その値をリスト項目の order プロパティに設定している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 処理対象の ul 要素に shuffle クラスをつける。