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

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

デモページを表示

CSS

補足

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

jQuery

補足

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

HTML

補足

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

関連投稿

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

列数と行数を指定して、レスポンシブな升目（正方形のグリッド）をつくる。

CSSグリッドとjQueryを使って、レスポンシブな升目（正方形のグリッド）をつくる。

デモページを表示

CSS

補足

• CSSグリッドのコンテナになる要素に、data-columns（列数） と data-rows（行数） 属性をつけることで、jQueryの処理対象になる。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• CSSグリッドのコンテナ要素に指定された列数・行数を取得し、コンテナの幅からコンテナの高さを設定している。
• グリッドの大きさは、grid-template-columns と grid-template-rows プロパティに列数と行数を設定することで決まる。
• グリッドのサイズをピクセル単位で直接指定していないので、きれいに割り切れない場合、完全な正方形にはならない。
• グリッドの間隔は コンテナ要素に data-gap 属性を指定することで、CSSグリッドの gap プロパティが設定される。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• CSSグリッドのコンテナ要素に data-columns（列数） と data-rows（行数）属性を指定する。必要であれば、data-gap 属性でグリッドの間隔を "単位付き" で指定する。