JSFiddle - React, Tailwind, and code Playground

by goodfriend

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div class="masonry">
    <div class="item stamp" data-grid-pos='{"x": 1, "y": 2}'></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

CSS

.masonry { border: 1px solid black; }
.item { background: green; width: 98px; height: 98px; border: 1px solid pink;}
.stamp { background: red !important; width: 198px; height: 198px; }

.masonry, .masonry .item { -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s;}
.masonry {-webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width;}
.masonry .item {-webkit-transition-property: -webkit-transform, -webkit-opacity; -moz-transition-property: -moz-transform, -moz-opacity;-ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity;}

JavaScript

$.Isotope.prototype._masonryResizeChanged = function() {
    return true;
  };

  $.Isotope.prototype._masonryReset = function() {

			// Setup layout properties
			var properties = this.masonry = {};

			// Get columnWidth & cols and rowHeight & rows (true argument) to properties
			this._getSegments();
                        this._getSegments(true);

                        var i = this.masonry.cols;
                        this.masonry.colYs = [];
                        while (i--) {
                            this.masonry.colYs.push( 0 );
                        }
                        var j = this.masonry.rows;
                        this.masonry.rowXs = [];
                        while(j--) {
                            this.masonry.rowXs.push( 0 );
                        }

			// Calculate cols & rows
			this._masonryGetSegments();

			// Create top row of the grid
			properties.grid = new Array(this.masonry.cols);

			// Set container dimensions to 0
			properties.containerHeight = 0;
			properties.containerWidth = 0;
  };

  $.Isotope.prototype._masonryLayout= function( $elems ) {
      var instance = this,
                        properties = this.masonry;

                        // filter out the stamps and place them a-priori
                        $elems.each(function() {
                            if($(this).is('.stamp')) {
				var $this  = $(this);

				// Element width & height
				var width = $this.outerWidth(true),
                                height = $this.outerHeight(true),

                                // How many columns/rows does the tile span
                                colSpan = Math.ceil(width / properties.columnWidth),
                                rowSpan = Math.ceil(height / properties.rowHeight);

				// Wider tiles can't fit into the last column (though keep it still at least one column wide)
				var maxCol = Math.max(properties.cols + 1 - colSpan, 1);
                              


                        ...