JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="container">
    <img width="120" height="100" src="http://lorempixel.com/120/100?1" />
    <img width="100" height="100" src="http://lorempixel.com/100/100?2" />
    <img width="130" height="100" src="http://lorempixel.com/130/100?3" />
    <img width="100" height="100" src="http://lorempixel.com/100/100?4" />
    <img width="110" height="100" src="http://lorempixel.com/110/100?5" />
    <img width="90" height="100" src="http://lorempixel.com/90/100?6" />
    <img width="100" height="100" src="http://lorempixel.com/100/100?7" />
    <img width="90" height="100" src="http://lorempixel.com/90/100" />
    <img width="150" height="100" src="http://lorempixel.com/150/100" />
    <img width="120" height="100" src="http://lorempixel.com/120/100" />
    <img width="130" height="100" src="http://lorempixel.com/130/100" />
    <img width="140" height="100" src="http://lorempixel.com/140/100" />
    <img width="120" height="100" src="http://lorempixel.com/120/100?13" />
    <img width="140" height="100" src="http://lorempixel.com/140/100?14" />
    <img width="80" height="100" src="http://lorempixel.com/80/100?15" />
    <img width="120" height="100" src="http://lorempixel.com/120/100?16" />
    <img width="110" height="100" src="http://lorempixel.com/110/100?17" />
    <img width="130" height="100" src="http://lorempixel.com/130/100?18" />
</div>

CSS

* {
    padding: 0;
    margin: 0;
}
.container {
    max-width: 640px;
    margin: 20px;
    background-color: #8DE;
    padding: 10px 10px 0;
    font-size: 0;
    text-align: justify;
}
.container img {
    height: 100px;
    width: auto;
    vertical-align: top;
    margin-bottom: 10px;
}

.container img:last-child {
    margin-right: 0 !important;
}

JavaScript

var imageGrid = (function (global, doc) {
    
    var head = doc.head || doc.getElementsByTagName("head")[0];
    var instances = [];
    var uid = 0;
    var eventsAdded = false;
    
    function checkAll () {
        var i = 0;
        var l = instances.length;
        while (i < l) {
            instances[i++].check();
        }
    }
    
    var ImageGrid = function init (container, options) {
        if (typeof container == "string") {
            container = doc.querySelector(container);
        }
        
        var style = doc.createElement("style");
        head.appendChild(style);
        
        var id = "imageGrid-" + uid++; 
        container.id = id;
        
        var images = container.getElementsByTagName("img");
        var ratios = [];
        
        var count = images.length;
        var i = 0;
        var image;
        
        while (i < count) {
            image = images[i++];
            var width = image.getAttribute("width");
            var height = image.getAttribute("height");
            ratios.push(width / height);
        }

        this.id = id;
        this.style = style;
        this.container = container;
        this.images = images;
        this.count = count;
        this.ratios = ratios;
        this.margin = options.margin || 10;
        this.maxHeight = options.maxHeight || 100;
        this.lastWidth;
        
    };
    
    ImageGrid.prototype.check = function check() {
        var width = this.container.offsetWidth - this.margin;
        if (width == this.lastWidth) {
            return;
        }
        var css = "";
        var i = 0;
        var rowOffset = i;
        var rowWeight = 0;
        var rowCount = 0;
        var ratio;
        
        while (i < this.count) {
            ratio = this.ratios[i++];
            rowCount++;
            rowWeight += ratio;
            var rowHeight = Math.round((width - (rowCount * this.margin)) / rowWeight);
                
            if (rowHeight <=...