display:flexとJavaScriptを使ってランダム表示を実装

2022.01.24最終更新日：2023.09.18

display:flexとJavaScriptを使ってランダム表示を実装

こんにちは。五平餅くんです。

あまり使う機会がないかもしれませんが、今回はランダム表示についてご説明したいと思います。

WordPressでループを回すときはランダム表示が可能になりますが、今回はWordPressでない時の場合です。

1 HTML、CSS：まずはdisplay:flexを指定
2 JavaScriptでランダム表示
3 まとめ：JavaScriptで操作するときは、できるだけcssにお任せ

HTML、CSS：まずはdisplay:flexを指定

<div class="inner">
  <div class="flex">
    <div class="flex-child js-flex-child-0">
      <p class="txt-box">0</p>
    </div>
    <div class="flex-child js-flex-child-1">
      <p class="txt-box">1</p>
    </div>
    <div class="flex-child js-flex-child-2">
      <p class="txt-box">2</p>
    </div>
    <div class="flex-child js-flex-child-3">
      <p class="txt-box">3</p>
    </div>
    <div class="flex-child js-flex-child-4">
      <p class="txt-box">4</p>
    </div>
    <div class="flex-child js-flex-child-5">
      <p class="txt-box">5</p>
    </div>
    <div class="flex-child js-flex-child-6">
      <p class="txt-box">6</p>
    </div>
    <div class="flex-child js-flex-child-7">
      <p class="txt-box">7</p>
    </div>
    <div class="flex-child js-flex-child-8">
      <p class="txt-box">8</p>
    </div>
    <div class="flex-child js-flex-child-9">
      <p class="txt-box">9</p>
    </div>
    <div class="flex-child js-flex-child-10">
      <p class="txt-box">10</p>
    </div>
  </div>
</div>

.inner {
  max-width: 800px;
  width: 97%;
  margin: 0 auto;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
  margin-right: -20px;
}

.flex-child {
  margin-top: 40px;
  width: 25%;
  padding-left: 20px;
  padding-right: 20px;
}

.txt-box {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 0;
  height: 100%;
  background: #f5f5f5;
  font-size: 60px;
  line-height: 1;
  font-weight: 700;
}

ここまでのデモはこちら↓

デモを表示

今回はdisplay:flexが必須になります。

その理由として、display:flexのときに使用できる、並び順を指定するcssプロパティ「order」を使ってランダム表示を実装できると言うものあります。

「レイアウトは横並びじゃなくて縦並びにしたい！」と言う方はdisplay:blockなどにせず、flex-direction:columnを指定してください。
（↑もっと使う機会がないかもしれません。。。）

また、ランダム表示したい要素のclass名に、「js-flex-child-0」のように0から順番に数字を振っていくのもポイントです（後ほど解説します）。

JavaScriptでランダム表示

いよいよJavaScriptです。

※今回はjQueryの使用を想定しております。

$(function() {

  //数字の配列を作る
  var array = [0,1,2,3,4,5,6,7,8,9,10];

  for (i = array.length - 1; i > -1; i--) {

    // i × ランダムな整数
    var j = Math.floor(Math.random() * (i + 1));

    //array_tmpにarrayの現在の数字を保存
    var array_tmp = array[i];

    //10から順番にランダムな数字に変化
    array[i] = array[j];

    //ランダムな数字の方は元々の数字に変化
    array[j] = array_tmp;

    //.js-flex-child-0~.js-flex-child-10までのorderを変更
    $('.js-flex-child-' + i).css('order',array[i]);
  }
});

デモはこちら

解説はコメントのところに書いてある通りになりますが、流れとしてはこのような感じです。

①ランダムな数字を11回作り、0から順番にそのランダムな数字に起き替える

②ランダムな数字の方は元々の数字（0から順番にforで回している数字）に置き換える

③.js-flex-child-0〜.js-flex-child-10のorderの値にランダムな数字を指定する。

orderはdisplay:flexの子要素の並び順を指定できるcssプロパティで、通常では値の数字の順に表示されていきます。

なのでここをランダムな数字にするとランダム表示になると言うことです！

なお、
var array = [0,1,2,3,4,5,6,7,8,9,10];
↑この部分はforなど使ってもっとスマートに書けると思います。100とかまであると大変なので。。