JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget felis eu elit bibendum vehicula in fermentum eros. Maecenas lacinia sapien sit amet lectus vehicula vitae placerat risus aliquet. Maecenas lacus arcu, eleifend non consectetur non, pulvinar eget ante. In ipsum mi, accumsan quis pharetra in, suscipit vitae diam. Curabitur eget suscipit tortor. Donec leo urna, luctus consectetur posuere non, vestibulum vel quam. Mauris nec libero turpis. Aenean quis tellus est, non eleifend nunc.</p>
    <div class="wrapper">
    <img src="http://cdn.conservativebyte.com/wp-content/uploads/2012/07/Obama764.jpg">
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget felis eu elit bibendum vehicula in fermentum eros. Maecenas lacinia sapien sit amet lectus vehicula vitae placerat risus aliquet. Maecenas lacus arcu, eleifend non consectetur non, pulvinar eget ante. In ipsum mi, accumsan quis pharetra in, suscipit vitae diam. Curabitur eget suscipit tortor. Donec leo urna, luctus consectetur posuere non, vestibulum vel quam. Mauris nec libero turpis. Aenean quis tellus est, non eleifend nunc.</p>
</article>

CSS

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

article {
    -webkit-column-width: 18em;
    -webkit-column-gap: 18px;
    -ms-column-width: 18em;
    -ms-column-gap: 18px;
    column-width: 18em;
    column-gap: 18px;
    padding: 20px;
    height: 150px;
    width: 100%;
    position: absolute;
    overflow: scroll;
}
p {
    font-size: 14px;    
    line-height: 24px;
    margin: 0 0 18px 0;   
}
img {
 display: block;
 max-height: 100%;
 max-width: 100%;
}
.wrapper { 
}

JavaScript

// When Array
$.whenArray = function(arr){
    return $.when.apply(this, arr);
};

// Fetch Dimensions
$.fn.fetchDimensions = function(){
    var promises = [],
        dimensions = [],
        deferred = $.Deferred(),
        checkDimensions = function(i, el, promise){
            console.log(el.width, el.height);
            if(el.width !== 0 && el.height !== 0){
                promise.resolve();
                dimensions[i] = { 'width' : el.width, 'height' : el.height };                                  
            } else {
                setTimeout(function(){
                    checkDimensions(i, el, promise);
                }, 10);       
            }
        };
    this.each(function(i){
        var promise = $.Deferred();
        checkDimensions(i, this, promise);
        promises.push(promise);
    });
    $.whenArray(promises).done(function(){
        deferred.resolve(dimensions);
    });
    return deferred.promise();
};

// Store references
var article = $('article'),
    pageHeight = article.height(),
    pageWidth = article.width(),
    columnGap = parseInt(article.css('-webkit-column-gap')) || 0,
    columnWidth = parseInt(article.css('-webkit-column-width')) || 0,
    columnCount = parseInt(article.css('-webkit-column-count')) || columnWidth,
    offset = 0,
    _article = article.clone(),
    _children = _article.children(),
    _images = _article.find('img'),
    preload = function(srcs){
        var deferred = $.Deferred(),
            promises = [];
        for(var i = 0; i < srcs.length; i++){
            var promise = $.Deferred(),
                img = $(srcs[i]);
            img.on('load', promise.resolve);
            img.on('error', promise.resolve);
            promises.push(promise);
        }
        $.whenArray(promises).done(deferred.resolve);
        return deferred.promise();
    };

// Catch instances where no columnWidth or columnCount are set
if(!columnCount && !columnWidth)
    columnCount = 1;

// Set column...