image grid (transform)

by phloe

HTML

<input type="range" min="50" max="400" value="100" id="maxHeight"/>
<!--div class="container">
    <img width="480" height="400" src="http://lorempixel.com/480/400?1" />
    <img width="400" height="400" src="http://lorempixel.com/400/400?2" />
    <img width="520" height="400" src="http://lorempixel.com/520/400?3" />
    <img width="400" height="400" src="http://lorempixel.com/400/400?4" />
    <img width="440" height="400" src="http://lorempixel.com/440/400?5" />
    <img width="360" height="400" src="http://lorempixel.com/360/400?6" />
    <img width="400" height="400" src="http://lorempixel.com/400/400?7" />
    <img width="360" height="400" src="http://lorempixel.com/360/400" />
    <img width="600" height="400" src="http://lorempixel.com/600/400" />
    <img width="480" height="400" src="http://lorempixel.com/480/400" />
    <img width="520" height="400" src="http://lorempixel.com/520/400" />
    <img width="560" height="400" src="http://lorempixel.com/560/400" />
    <img width="480" height="400" src="http://lorempixel.com/480/400?13" />
    <img width="560" height="400" src="http://lorempixel.com/560/400?14" />
    <img width="320" height="400" src="http://lorempixel.com/320/400?15" />
    <img width="480" height="400" src="http://lorempixel.com/480/400?16" />
    <img width="440" height="400" src="http://lorempixel.com/440/400?17" />
    <img width="520" height="400" src="http://lorempixel.com/520/400?18" />
</div-->
<div class="container">
    <div data-ratio="16-9">
        <img width="800" height="450" src="https://loremflickr.com/800/450?1" />
        <div>
            <h4>Foo bar</h4>
        </div>
    </div>
    <img width="400" height="400" src="https://loremflickr.com/400/400?2" />
    <img width="520" height="400" src="https://loremflickr.com/520/400?3" />
    <img width="400" height="400" src="https://loremflickr.com/400/400?4" />
    <img width="440" height="400" src="https://loremflickr.com/440/400?5" />
    <img width="360" height="400"...

CSS

* {
    padding: 0;
    margin: 0;
}
body {
    padding: 20px; 
}
.container {
    _max-width: 640px;
    background-color: #8DE;
    padding: 10px 0 0 10px;
    font-size: 0;
    text-align: justify;
    _word-spacing: 1px;
}

.container > * {
    height: 100px;
    width: auto;
    vertical-align: top;
    margin-bottom: 10px;
    margin-right: 10px;
    display: inline-block;
}

.container > i {
    display: none;
    height: auto;
    margin: 0;
}

.container > div {
    overflow: hidden;
    position: relative;
}

/*
.container > div[data-ratio] > img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0.25;
}
.container > div[data-ratio]:after {
    content: "";
    display: block;
    z-index: -1;
    width: 100%;
    background-color: rgba(0, 255, 0, 0.5);
    _transform: rotate(90deg);
}

.container > div[data-ratio="16-9"]:after {
    padding-bottom: 177.7777777777%;
}

.container > div[data-ratio="4-3"]:after {
    padding-bottom: 133.3333333333%;
}

.container > div[data-ratio="1-1"]:after {
    padding-bottom: 100%;
}
*/


.container > div > img {
    height: 100%;
    width: auto;
    display: inline-block;
    float: left;
}

.container > div > div {
    background-color: rgba(0, 0, 0, 0.5);
    color: #FFF;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    font-size: 16px;
    display: none;
}
.container > div:hover > div {
    display: block; 
}

JavaScript

/* setup */

(function (container, num) {
    var i = 0;
    while (i < num) {
        var img = document.createElement("img");
        var width = 640 + (Math.round(Math.random() * 30) * 10);
        var height = 400 + (Math.round(Math.random() * 20) * 10);
        img.setAttribute("width", width);
        img.setAttribute("height", height);
        img.setAttribute("src", "https://loremflickr.com/" + width + "/" + height +"?" + i);
        container.appendChild(img);
        i++;
    }
} (document.querySelector(".container"), 100));

/* setup done */

var imageGrid = (function (global, doc) {
    
    var head = doc.head || doc.getElementsByTagName("head")[0];
    var instances = [];
    var uid = 0;
    var eventsAdded = false;
    
    function renderAll () {
        instances.forEach(function(instance){
            instance.render();
        });
    }
    
    var ImageGrid = function init (container, options) {
        if (typeof container === "string") {
            container = doc.querySelector(container);
        }
        
        var style = doc.createElement("style");
        head.appendChild(style);
        
        var id = container.id;
        if (!id) {
            id = "image-grid-" + uid++; 
            container.id = id;
        }
        
        var elements = container.childNodes;
        var ratios = [];
        
        var i = elements.length;
        var count = 0;
        var element, width, height, img;
        while (i--) {
            element = elements[i];
            if (element.nodeType === 1) {
                count++;
                img = null;
                width = 16;
                height = 9;
                
                if (element.nodeName.toLowerCase() === "img") {
                   img = element;
                }
                else {
                    ratio = element.getAttribute("data-ratio");
                    if (ratio) {
                        ratio = ratio.split("-");
                        width...