JSFiddle - React, Tailwind, and code Playground

by Andrei Gheorghiu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<script id="waterfall-template" type="text/template">
  <div class="pin">
    <a href="javascript:;">
      <img src="https://tympanus.net/Development/GridLoadingEffects/images/1.jpg" />
    </a>
  </div>
  <div class="pin">
    <a href="javascript:;">
      <img src="https://tympanus.net/Development/GridLoadingEffects/images/2.jpg" />
    </a>
  </div>
  <div class="pin">
    <a href="javascript:;">
      <img src="https://tympanus.net/Development/GridLoadingEffects/images/3.jpg" />
    </a>
  </div>
  <div class="pin">
    <a href="javascript:;">
      <img src="https://tympanus.net/Development/GridLoadingEffects/images/4.jpg" />
    </a>
  </div>
  <div class="pin">
    <a href="javascript:;">
      <img src="https://tympanus.net/Development/GridLoadingEffects/images/5.jpg" />
    </a>
  </div>
  <div class="pin">
    <a href="javascript:;">
      <img src="https://tympanus.net/Development/GridLoadingEffects/images/6.jpg" />
    </a>
  </div>
  <div class="pin">
    <a href="javascript:;">
      <img src="https://tympanus.net/Development/GridLoadingEffects/images/7.jpg" />
    </a>
  </div>
  <div class="pin">
    <a href="javascript:;">
      <img src="https://tympanus.net/Development/GridLoadingEffects/images/8.jpg" />
    </a>
  </div>
  <div class="pin">
    <a href="javascript:;">
      <img src="https://tympanus.net/Development/GridLoadingEffects/images/9.jpg" />
    </a>
  </div>
  <div class="pin">
    <a href="javascript:;">
      <img src="https://tympanus.net/Development/GridLoadingEffects/images/10.png" />
    </a>
  </div>
  <div class="pin">
    <a href="javascript:;">
      <img src="https://tympanus.net/Development/GridLoadingEffects/images/11.png" />
    </a>
  </div>
  <div class="pin">
    <a href="javascript:;">
      <img...

SCSS

#waterfall {
  > div {
    overflow: hidden;
  }   
  .pin {
    width: calc(50% - 4px);
    opacity: 0;
    animation-duration: .75s;
    animation-fill-mode: both;
    &.inView {
      opacity: 1;
      animation-name: bounceInUp;
      &.fix {
        animation: none;
      }
    }
    a {
      display: block;
      padding: 4px 4px 8px;
      img {max-width: 100%;}
    }
  }
}
.loadMore {
  min-height: 6rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  box-sizing: border-box;
}

.container {
  text-align: center;
  #waterfall {
    max-width: 800px;
    margin: 0 auto;
  }
}

@keyframes bounceInUp { 
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

JavaScript

// bootstrap-waterfall.js doesn't have a cdn yet. You need to include it in your project
// from https://rawgithub.com/Mystist/bootstrap-waterfall/master/dist/bootstrap-waterfall.js

+function(t){"use strict";function i(i){this.$pins=i,this.tasks=[],this.timerId=null,this.deferred=new t.Deferred}function n(t){this.img=t,this.initialWidth=t.width,this.initialHeight=t.height}function e(i){return this.each(function(){var n=t(this),e=n.data("mystist.waterfall"),s="object"==typeof i&&i;e&&"string"!=typeof i&&e.destroy()&&(e=null),e||n.data("mystist.waterfall",e=new o(this,s)),"string"==typeof i&&e[i]()})}var s=s||{now:Date.now||function(){return(new Date).getTime()},throttle:function(t,i,n){var e,o,r,a=null,h=0;n||(n={});var l=function(){h=n.leading===!1?0:s.now(),a=null,r=t.apply(e,o),a||(e=o=null)};return function(){var u=s.now();h||n.leading!==!1||(h=u);var c=i-(u-h);return e=this,o=arguments,0>=c||c>i?(a&&(clearTimeout(a),a=null),h=u,r=t.apply(e,o),a||(e=o=null)):a||n.trailing===!1||(a=setTimeout(l,c)),r}},debounce:function(t,i,n){var e,o,r,a,h,l=function(){var u=s.now()-a;i>u&&u>=0?e=setTimeout(l,i-u):(e=null,n||(h=t.apply(r,o),e||(r=o=null)))};return function(){r=this,o=arguments,a=s.now();var u=n&&!e;return e||(e=setTimeout(l,i)),u&&(h=t.apply(r,o),r=o=null),h}}},o=function(i,n){this.$element=t(i),this.options=t.extend({},o.DEFAULTS,n),this.id=Math.random().toString().slice(2),this.$fakePin=null,this.$container=null,this.$pins=null,this.pinWidth=null,this.imgWidth=null,this.lefts=[],this.tops=[],this.init().calculateWidth().calculatePosition().sail(),t(window).on("resize.mystist.waterfall"+this.id,s.debounce(t.proxy(function(){t(window).off("scroll.mystist.waterfall"+this.id),this.calculateWidth().calculatePosition().ship(r.getLoadedPins.call(this))},this),777))};o.VERSION="0.2.5",o.DEFAULTS={},o.prototype.init=function(){return this.initPins().initAttributes(),this},o.prototype.initPins=function(){var...