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

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

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

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

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

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;
}

@media screen and (max-width: 1499px) {
  .inner {
    width: 97%;
  }
}

.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とかまであると大変なので。。

まとめ:JavaScriptで操作するときは、できるだけcssにお任せ

ありがとうございました!

今回のように、JavaScriptで表示を操作するときは、できるだけcssにお任せするのが良いと思います。

理由としては、動作が早い、動かしやすいなどさまざまな利点があります。

cssは強力です!

また、下の記事で今回の例を応用して、数秒ごとにランダムな値が切り替わる表示もやって見ました!(もっと機会がないかもしれないですね。。)

もしよければこちらもご覧ください!

JavaScriptで数秒ごとに何度もランダム表示する方法

JavaScriptで数秒ごとに繰り返しランダム表示する方法

こんにちは。五平餅くんです。 以前、display:flexとJavaScriptでランダムな並び順での表示の実装方法を投稿しました。 今回はその応用です。 ランダムな並びでの表示を数秒ごとに繰り返して実行。毎回ランダムな並びで。 ややこしいですが、まずはデモをご覧ください! 完成コード <d...

今回も最後まで読んでいただきありがとうございました。