JSFiddle - React, Tailwind, and code Playground

jQuery Dynamic Grid

by Jennifer Perrin

HTML

<div class="pagewrap">
<div class="demo-box-wrap">
    <!-- LIVE DEMO -->
    <div class="demo-box">

<div class="grid-wrap" style="width: 50%; max-width: 800px; margin: 40px auto;">

        <div id="grid-src">
            <div id="grid1" class="grid">
                <div class="dg-cell">
                    <div class="cell-content-wrapper"><div class="cell-content"><div class="content">Content goes here</div></div></div>
                </div>
                <div class="dg-cell">
                    <div class="cell-content-wrapper"><div class="cell-content"><div class="content">Content goes here</div></div></div>
                </div>
                <div class="dg-cell">
                    <div class="cell-content-wrapper"><div class="cell-content"><div class="content">Content goes here</div></div></div>
                </div>
                <div class="dg-cell">
                    <div class="cell-content-wrapper"><div class="cell-content"><div class="content">Content goes here</div></div></div>
                </div>
                <div class="dg-cell">
                    <div class="cell-content-wrapper"><div class="cell-content"><div class="content">Content goes here</div></div></div>
                </div>
                <div class="dg-cell">
                    <div class="cell-content-wrapper"><div class="cell-content"><div class="content">Content goes here</div></div></div>
                </div>
                <div class="dg-cell">
                    <div class="cell-content-wrapper"><div class="cell-content"><div class="content">Content goes here</div></div></div>
                </div>
                <div class="dg-cell">
                    <div class="cell-content-wrapper"><div class="cell-content"><div class="content">Content goes here</div></div></div>
                </div>
                <div class="dg-cell">
                    <div class="cell-content-wrapper"><div class="cell-content"><div class="content">Content goes...

CSS

.dg-wrap{width:600px;height:400px;position:relative;padding:0;overflow:hidden}
.dg-column-wrap{display:block;margin:0;padding:0;position:absolute;left:0;top:0;overflow:hidden}
.dg-cell-wrap{display:block;margin:0;padding:0;overflow:hidden}
.dg-main-content-inner-wrap{display:block;margin:0;padding:0;overflow:hidden;position:relative}
.dg-image{display:block;margin:0;padding:0}
.dg-add-content-wrap{display:none}

/* ------------------------------------------------------------------------------- */

.responsive {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 109px;
    height: 88px;
    background: url('../../img/toolbar/resize.png');
}
.demo-box {
    width: 100% !important;
}

.grid-wrap {
    width: 50%;
    max-width: 800px;
    margin: 0 auto;
}
#grid-destination {
    width: 100%;
}
.dg-wrap {
    margin: 0 auto;
}
#grid-src {
    display: none;
}

.grid {
    margin: 20px 0;
}
.grid .cell-content-wrapper {
    color: white;
    background: #91c2de;
    width: 100%;
    height: 100%;
    font: 10px/18px tahoma, sans-serif;
    text-align: center;
    display: table;
}

.cell-content {
    display:table-cell; 
    vertical-align:middle;
}

#more-examples {
    text-align: center;
    width: 100%;
}
.example {
    display: inline-block;
    width: 62px;
    height: 63px;
    background: url('../../img/dynamic-grid-engine/layouts.png') 0 0;
    margin: 0 10px;
    padding: 0;
    cursor: pointer;
}

JavaScript

(function(e) {
    function a(a, b) {
        return a.pageX > b.offset().left && a.pageX < b.offset().left + b.width() && a.pageY > b.offset().top && a.pageY < b.offset().top + b.height() ? !0 : !1
    }
    function c(a, b, c) {
        this.O = b;
        this.cells = c;
        this.nCells = c.length;
        this.html = "";
        this.lastColumnRows = 99999;
        this.lastColumnDirection = -1;
        this.interval = this.fluidWidth = !1;
        this.columns = [];
        this.root = a;
        this.wrap = 0
    }
    function b(a, b, c, d) {
        this.O = d;
        this.parent = a;
        this.cells = b;
        this.nCells = this.cells.length;
        this.index = c;
        this.html = "";
        this.top = this.left = this.height =
        this.width = 0;
        this.heights = [];
        this.positions = [];
        this.rows = 0;
        this.direction = -this.parent.lastColumnDirection;
        this.position = 1 == this.direction ? 0 : this.nCells - this.rows - 1;
        this.animated = !1;
        this.root = 0;
        this.parent.lastColumnDirection = this.direction
    }
    function d(a, b, c, d) {
        this.O = d;
        this.parent = a;
        this.content = b;
        this.html = "";
        this.width = this.O.width / this.O.cols;
        this.height = c;
        this.root = 0
    }
    var f = [],
        g;
    (function() {
        var a = document.createElement("div");
        vendors = ["Khtml", "Ms", "O", "Moz", "Webkit"];
        len = vendors.length;
        return function(b) {
            if (b in a.style) return !0;
            for (b = b.replace(/^[a-z]/, function(a) {
                return a.toUpperCase()
            }); len--;) if (vendors[len] + b in a.style) return !0;
            return !1
        }
    })()("transform");
    c.prototype.init = function() {
        this.O.height += this.O.padding;
        this.height = this.O.height;
        if (void 0 == this.O.width) {
           ...