CSS
補足
- あらかじめCSSグリッドのエリアを設定しておいて、各アイテム(画像)の data-area 属性で指定した配置エリアをjQueryでランダムに入れ替える。
- レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。
jQuery
補足
- data-area属性の値をランダムに変更することで、そのアイテム(画像)が表示するエリアを変えている。
- デモページで使用している jQuery のバージョンは 1.12.4 。
HTML
補足
- このサンプルでは、CSSグリッドのコンテナに grid-shuffle クラス、各アイテムに data-area 属性をつけたものが処理対処になる。
- また、ページ内に対象となるCSSグリッドのコンテナが複数あることは想定していない。