JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div id="art-wall">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
</div>

JavaScript

$(() => {
  function mulberry32(a) {
    return function() {
      var t = a += 0x6D2B79F5;
      t = Math.imul(t ^ t >>> 15, t | 1);
      t ^= t + Math.imul(t ^ t >>> 7, t | 61);
      return ((t ^ t >>> 14) >>> 0) / 4294967296;
    }
  }

  function getSeed() {
    return Math.floor(Math.random() * Math.pow(2, 32));
  }


  if (!sessionStorage.artSeed) {
    sessionStorage.artSeed = getSeed();
  }
  const seed = Number(sessionStorage.artSeed);
  const rng = mulberry32(seed);
  var parent = $("#art-wall");
  var divs = Array.from(parent.children());
  while (divs.length) {
    const item = divs.splice(Math.floor(rng() * divs.length), 1)[0]
    parent.append(item);
  }

})