JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.0/imagesloaded.pkgd.min.js"></script>
<div id="container">
  <div class="masonryImage">
    <img src="http://lorempixum.com/200/200/food/1" alt="" />
  </div>

  <div class="masonryImage">
    <img src="http://lorempixum.com/200/150/food/10" alt="" />
  </div>

  <div class="masonryImage">
    <img src="http://lorempixum.com/200/250/food/3" alt="" />
  </div>

  <div class="masonryImage">
    <img src="http://lorempixum.com/200/200/food/1" alt="" />
  </div>

  <div class="masonryImage">
    <img src="http://lorempixum.com/200/150/food/5" alt="" />
  </div>

  <div class="masonryImage">
    <img src="http://lorempixum.com/200/250/food/6" alt="" />
  </div>

  <div class="masonryImage">
    <img src="http://lorempixum.com/200/200/food/1" alt="" />
  </div>

  <div class="masonryImage">
    <img src="http://lorempixum.com/200/150/food/2" alt="" />
  </div>

  <div class="masonryImage">
    <img src="http://lorempixum.com/200/250/food/3" alt="" />
  </div>

  <div class="masonryImage">
    <img src="http://lorempixum.com/200/200/food/4" alt="" />
  </div>

  <div class="masonryImage">
    <img src="http://lorempixum.com/200/150/food/5" alt="" />
  </div>

  <div class="masonryImage">
    <img src="http://lorempixum.com/200/250/food/7" alt="" />
  </div>
  <div class="masonryImage">
    <img src="http://lorempixum.com/200/200/food/1" alt="" />
  </div>

  <div class="masonryImage">
    <img src="http://lorempixum.com/200/150/food/2" alt="" />
  </div>

  <div class="masonryImage">
    <img src="http://lorempixum.com/200/250/food/10" alt="" />
  </div>

  <div class="masonryImage">
    <img src="http://lorempixum.com/200/200/food/9" alt="" />
  </div>

  <div class="masonryImage">
    <img src="http://lorempixum.com/200/150/food/5" alt="" />
  </div>

  <div class="masonryImage">
    <img...

JavaScript

$(function() {

    var $container = $('#container');

    $container.imagesLoaded(function() {
      $container.masonry({
        itemSelector: '.masonryImage'
      });
    });

  });