ページ読み込み時や再読み込みした時に、リストの項目をランダムに入れ替える。
CSS
補足
- flexbox の order プロパティで順番を入れ替えるので、リストに flexbox のプロパティを設定している。
- order プロパティは、読み込み時や再読み込み時に jQuery で設定している。
- レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。
jQuery
補足
- 最初に重複しない整数の乱数を配列に用意し、その値をリスト項目の order プロパティに設定している。
- デモページで使用している jQuery のバージョンは 1.12.4 。
HTML
補足
- 処理対象の ul 要素に shuffle クラスをつける。