ページ読み込み時に、タイル状に配置した画像をランダムに入れ替える。

ページの読み込み時やリロード時に、タイル状に配置した画像をランダムに入れ替える。基本的には下記 "関連投稿" の方法を組み合わせている。

デモページを表示

CSS

補足

• あらかじめCSSグリッドのエリアを設定しておいて、各アイテム（画像）の data-area 属性で指定した配置エリアをjQueryでランダムに入れ替える。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• data-area属性の値をランダムに変更することで、そのアイテム（画像）が表示するエリアを変えている。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• このサンプルでは、CSSグリッドのコンテナに grid-shuffle クラス、各アイテムに data-area 属性をつけたものが処理対処になる。
• また、ページ内に対象となるCSSグリッドのコンテナが複数あることは想定していない。

関連投稿

• 列数と行数を指定して、レスポンシブな升目（正方形のグリッド）をつくる。
• ページ読み込み時に、リストの項目をランダムに入れ替える。