2021年3月23日火曜日

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

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

デモページを表示

CSS

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

jQuery

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

HTML

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