JSFiddle - React, Tailwind, and code Playground

by uiwwnw

HTML

<!-- main>(div.skewItem>p{$})*30 -->
<main>
  <div class="skewItem">
    <p>1</p>
  </div>
  <div class="skewItem">
    <p>2</p>
  </div>
  <div class="skewItem">
    <p>3</p>
  </div>
  <div class="skewItem">
    <p>4</p>
  </div>
  <div class="skewItem">
    <p>5</p>
  </div>
  <div class="skewItem">
    <p>6</p>
  </div>
  <div class="skewItem">
    <p>7</p>
  </div>
  <div class="skewItem">
    <p>8</p>
  </div>
  <div class="skewItem">
    <p>9</p>
  </div>
  <div class="skewItem">
    <p>10</p>
  </div>
  <div class="skewItem">
    <p>11</p>
  </div>
  <div class="skewItem">
    <p>12</p>
  </div>
  <div class="skewItem">
    <p>13</p>
  </div>
  <div class="skewItem">
    <p>14</p>
  </div>
  <div class="skewItem">
    <p>15</p>
  </div>
  <div class="skewItem">
    <p>16</p>
  </div>
  <div class="skewItem">
    <p>17</p>
  </div>
  <div class="skewItem">
    <p>18</p>
  </div>
  <div class="skewItem">
    <p>19</p>
  </div>
  <div class="skewItem">
    <p>20</p>
  </div>
  <div class="skewItem">
    <p>21</p>
  </div>
  <div class="skewItem">
    <p>22</p>
  </div>
  <div class="skewItem">
    <p>23</p>
  </div>
  <div class="skewItem">
    <p>24</p>
  </div>
  <div class="skewItem">
    <p>25</p>
  </div>
  <div class="skewItem">
    <p>26</p>
  </div>
  <div class="skewItem">
    <p>27</p>
  </div>
  <div class="skewItem">
    <p>28</p>
  </div>
  <div class="skewItem">
    <p>29</p>
  </div>
  <div class="skewItem">
    <p>30</p>
  </div>
</main>

SCSS

div {
  @for $i from 1 through 30 {
    $s-min: 20;
    $s-max: 70;
    $l-min: 30;
    $l-max: 90;
    &:nth-child(#{$i}) {
      $color: hsl(random(360),$s-min+random($s-max+-$s-min),$l-min+random($l-max+-$l-min));
      width: 25%;
      height: 50 + random(300) + px;
      
      p {
      $lightness: lightness($color);
       color: #fff;
       background-color: $color;
       
       @if ($lightness > 50 ) {
         color: #000;
       }
      }
    }
  }
  
  float: left;
  padding: 10px;
  font-size: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  
  p {
    height: 100%;
    margin: 0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
  }
}

JavaScript

class Skew {
  constructor(e) {
    this.wrap = document.querySelector(e);
    this.wrapMarginTop = this.wrap.offsetTop;
    this.el = this.wrap.querySelectorAll('.skewItem');
    this.content = [];
    this.length = this.el.length;
  }
  chk(idx) {
    for (let i = idx; i < this.length; i++) {
      if (this.content[i] === undefined) {
        this.content[i] = {};
        this.content[i].el = this.el[i];
        this.content[i].style = undefined;
        this.content[i].elTop = this.el[i].offsetTop;
        this.content[i].elLeft = this.el[i].offsetLeft;
        this.content[i].elHeight = this.el[i].offsetHeight;
      } else {
        if (this.content[i].elTop === this.el[i].offsetTop && this.content[i].elLeft === this.el[i].offsetLeft) {
          return false;
        };
        this.content[i].elTop = this.el[i].offsetTop;
        this.content[i].elLeft = this.el[i].offsetLeft;
      }
    }
    return this.content;
  }
  paint(idx) {
    this.chk(idx);
    const current = this.content[idx];
    const currentTop = current.elTop;
    const currentLeft = current.elLeft;
    let ex = idx - 1 < 0 ? current : this.content[idx - 1];
    for (let i = idx - 1; i >= 0; i--) {
      if (this.content[i].elLeft === currentLeft) {
        ex = this.content[i];
        const exBottom = (ex !== current) ? ex.elTop + ex.elHeight : this.wrapMarginTop;
        const newMargin = ex.style === undefined ? 0 : ex.style;
        const style = Number(currentTop - exBottom + newMargin);
        if (style === 0) {
          return false
        } else {
          current.style = style;
          current.el.setAttribute('style', 'margin-top: -' + current.style + 'px;');
        };
        //console.log(this);
        return false;
      }
    }
  }
  do() {
    this.chk(0);
    for (let i = 0; i < this.length; i++) {
      this.paint(i);
    }
  }
}
/* 
var skew = function(e) {
  var vars = {};
  this.var = function() {
    vars.wrap = document.querySelector(e);
    vars.content =...