【jQuery】要素内に複数の画像をランダムに配置する

こんにちは、Ryohei（@ityryohei）です！

jQueryで要素内に複数の画像をランダムに配置する方法のご紹介です。

具体的には下記のような表示となります。 下記デモの右下の「Return」をクリックすると、要素の中に表示されているキラキラ像の表示位置が変更されているかと思います。

See the Pen Set Random Images | jQuery by ryoy (@intotheprogram) on CodePen.

本記事では、上記デモのように要素内に複数の画像をランダムに配置する方法をご紹介しています。

では、さっそく解説していきます。

要素内に複数の画像をランダムに配置する

HTML

まずはランダムに画像を表示するための要素を作成します。本記事ではidがboxという要素の中に画像を表示するように記述しています。

<section id="box">

  /* ～省略～ */

</section>

CSS

上記で記述したidがboxの要素と、ランダムに追加するimgタグにスタイルを定義します。下記のポイントを参考にスタイルを指定していただければと思います。

• ランダムに配置する画像は絶対位置で指定するため、親要素を相対位置とする
• 生成した乱数によっては、絶対位置が親要素からはみ出す可能性があるため、表示が崩れないようにスクロールさせないようにしておく

わかにくい説明になってしまいましたが、box要素にposition: relativeとoverflow: hiddenをつけていただければ大丈夫です。

下記はDEMOで使用しているCSSになります。

#box {
  position: relative;
  width: 100%;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
}

#box img {
  position: absolute;
  width: 20px;
  height: 20px
}

JS

スクリプトはjQueryで記述します。

処理内容はコメントに記載していますので、そちらをご確認いただければと思います。

//関数定義
function randomImages(id){

  //関数の引数に設定したid要素を変数に代入
  var box = $(id);

  //画像配列（ファイル名や連番等を入れる）
  var imageList = [
    'image01',
    'image02',
    'image03',
    'image04'
  ];

  //配列の数だけ繰り返し処理
  for( var i = 0; i < imageList.length; i++){

    //縦横軸用の乱数生成
    var x = Math.floor(Math.random() * 100);
    var y = Math.floor(Math.random() * 100);

    //box要素にimgタグを追加（乱数を代入した変数をポジションに設定）
    box.append('<img src="assets/images/icon/'+imageList[i]+'.png" alt="" style="top:'+y+'%; left:'+x+'%;">');
  }
}

//関数実行
randomImages('#box');

DEMO

冒頭でもご紹介しましたが、本記事で紹介した内容を実装すると下記のデモのような表示となります。

See the Pen Set Random Images | jQuery by ryoy (@intotheprogram) on CodePen.

本記事では画像を使っていますが、CSSでスタイルをつけた要素をランダムに配置したり、アニメーションで動かしたりと応用が効きますので、色々お試しいただければと思います。

以上、jQueryで要素内に複数の画像をランダムに配置する方法のご紹介でした！

要素内に複数の画像をランダムに配置する場合、最近はcanvasで実装することが多いですが、jQueryでもささっと実現することができますので、案件に応じて適宜に使い分けていただければと思います。