JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<h1>Modified Masonry - from the bottom</h1>
<div id="secondary2" class="wrap">
    <div class="box col1">
        <h5>1</h5>
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris. </p>
    </div>
    
    <div class="box col2">
        <h5>2</h5>
        <p>Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit.</p>
    </div>
    
    <div class="box col1">
        <h5>3</h5>
        <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Ut eget sem risus, et posuere velit.  Aenean ac mauris non ligula.  </p>
    </div>
    
    <div class="box col1">
        <h5>4</h5>
        <p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.</p>
    </div>
    
    <div class="box col1">
        <h5>5</h5>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p>
    </div>
    
    <div class="box col1">
        <h5>6</h5>
        <p>Cadipiscing in, lacinia vel, tellus. </p>
    </div>
    
    <div class="box col1">
        <h5>7</h5>
        <p>Pellentesque a diam sit amet mi ullamcorper vehicula.  adipiscing in, lacinia vel, tellus.</p>
    </div>
    
    <div class="box col3">
        <h5>8</h5>
        <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.  Suspendisse ac urna. Etiam pellentesque. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.  Suspendisse ac urna. Etiam pellentesque. </p>
    </div>
    
    <div class="box col2">
        <h5>9</h5>
        <p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Ut condimentum mi vel tellus. Suspendisse laoreet....

CSS

/**** Masonry CSS ****/

.wrap {
    background: #FFF;
    border: 0px solid #456;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    clear: both;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.box {
    margin: 5px;
    padding: 5px;
    background: #D8D5D2;
    font-size: 9px;
    float: left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.col1 { width: 80px; }
.col2 { width: 180px; }
.col3 { width: 280px; }
.col4 { width: 380px; }
.col5 { width: 480px; }

.col1 img { max-width: 80px; }
.col2 img { max-width: 180px; }
.col3 img { max-width: 280px; }
.col4 img { max-width: 380px; }
.col5 img { max-width: 480px; }



/**** Primer comparison ****/

#comparison {
    overflow: auto;
}

#comparison .example {
    width: 420px;
    float: left;
    margin-right: 20px;
}

#comparison .box h5 {
    float: left;
    margin-bottom: 0;
    font-size: 30px;
    margin-right: 4px;
    line-height: 28px;
    font-weight: bold;
    color: #FFF;
}



/* Magazine page */

#tumblelog {
    background: #FFF;
    padding: 1.0em;
}

#tumblelog .story {
    margin: 10px;
    border-top: 4px solid #DCB;
    padding-top: 10px;
    background: #FFF;
    float: left;
}

#tumblelog h1, #tumblelog h2, #tumblelog h3 { font-weight: bold;}

#tumblelog .col1 { width: 220px;}
#tumblelog .col2 { width: 460px;}
#tumblelog .col3 { width: 700px;}

#tumblelog .col1 img,
#tumblelog .col2 img,
#tumblelog .col3 img {
    max-width: none;
}

/* Infinite Scroll loader */
#infscr-loading { 
    z-index: 5000;
    position: fixed;
    left: 40%;
    bottom: 40px;
    width: 200px;
    height: 100px;
    padding: 10px;
    background: #000; 
    opacity: 0.8;
    color: #FFF;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/**** Filtering nav ****/


.box.black,
#filtering-nav .black {
    background-color: #111;
    color: #FFF;
}

.box.red,
#filtering-nav...

JavaScript

/*************************************************
 **  jQuery Masonry version 1.3.2
 **  Copyright David DeSandro, licensed MIT
 **  http://desandro.com/resources/jquery-masonry
 **************************************************/
;
(function($) {

/*!
   * smartresize: debounced resize event for jQuery
   * http://github.com/lrbabe/jquery-smartresize
   *
   * Copyright (c) 2009 Louis-Remi Babe
   * Licensed under the GPL license.
   * http://docs.jquery.com/License
   *
   */
    var event = $.event,
        resizeTimeout;

    event.special.smartresize = {
        setup: function() {
            $(this).bind("resize", event.special.smartresize.handler);
        },
        teardown: function() {
            $(this).unbind("resize", event.special.smartresize.handler);
        },
        handler: function(event, execAsap) {
            // Save the context
            var context = this,
                args = arguments;

            // set correct event type
            event.type = "smartresize";

            if (resizeTimeout) {
                clearTimeout(resizeTimeout);
            }
            resizeTimeout = setTimeout(function() {
                jQuery.event.handle.apply(context, args);
            }, execAsap === "execAsap" ? 0 : 100);
        }
    };

    $.fn.smartresize = function(fn) {
        return fn ? this.bind("smartresize", fn) : this.trigger("smartresize", ["execAsap"]);
    };



    // masonry code begin
    $.fn.masonry = function(options, callback) {

        // all my sweet methods
        var msnry = {
            getBricks: function($wall, props, opts) {
                var hasItemSelector = (opts.itemSelector === undefined);
                if (opts.appendedContent === undefined) {
                    // if not appendedContent
                    props.$bricks = hasItemSelector ? $wall.children() : $wall.find(opts.itemSelector);
                } else {
                    //  if appendedContent...
                    props.$bricks...