Javascript Pinterest Layout Plugin

<!DOCTYPE html>
<html>

<head>
    <title>Masonry Plugin</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="cards">
        <div class="card">
            <div class="card-image">
                <img src="https://s-media-cache-ak0.pinimg.com/564x/65/33/85/6533859c383845b498d81990c4be2a41.jpg" />
            </div>
            <div class="card-info">
                Low-poly illustrations
            </div>
        </div>

        <div class="card">
            <div class="card-image">
                <img src="https://s-media-cache-ak0.pinimg.com/564x/19/dc/3d/19dc3d3f392a57378c55c32e3ef7574e.jpg" />
            </div>
            <div class="card-info">
                Burger Bits by cronobreaker.devi... on @deviantART
            </div>
        </div>

        <div class="card">
            <div class="card-image">
                <img src="https://s-media-cache-ak0.pinimg.com/564x/5c/dd/72/5cdd72b452abf457e85ec9ea38aa6559.jpg" />
            </div>
            <div class="card-info">
                Da' Monk Photo by Mnk Crew
            </div>
        </div>

        <div class="card">
            <div class="card-image">
                <img src="https://s-media-cache-ak0.pinimg.com/564x/89/df/1c/89df1ceeb79793465779a273794faa10.jpg" />
            </div>
            <div class="card-info">
                vector animals
                <br> Photo by Çetin Can Karaduman on Behance
            </div>
        </div>

        <div class="card">
            <div class="card-image">
                <img src="https://s-media-cache-ak0.pinimg.com/564x/f8/e7/bf/f8e7bfc4e7523e1d050fd12e2141eb48.jpg" />
            </div>
            <div class="card-info">
                Diet Zombie Pop by cronobreaker.devi... on @deviantART
            </div>
        </div>

        <div class="card">
            <div class="card-image">
                <img src="https://s-media-cache-ak0.pinimg.com/564x/0a/ec/7b/0aec7ba66f3970edbeed34168ea7e776.jpg" />
            </div>
            <div class="card-info">
                Vectors Assemble
                <br> Photo by William Teal on Behance
            </div>
        </div>

        <div class="card">
            <div class="card-image">
                <img src="https://s-media-cache-ak0.pinimg.com/564x/8f/de/a6/8fdea6e709e1dbf66aa5f031c0e187fc.jpg" />
            </div>
            <div class="card-info">
                Camila 2 - Urban Arts by Cristiano
            </div>
        </div>

        <div class="card">
            <div class="card-image">
                <img src="https://s-media-cache-ak0.pinimg.com/564x/c2/7f/4c/c27f4ce431471238a8ac08de609a3e24.jpg" />
            </div>
            <div class="card-info">
                BMO v2.0 by shoden23.devianta... on @deviantART
            </div>
        </div>

        <div class="card">
            <div class="card-image">
                <img src="https://s-media-cache-ak0.pinimg.com/564x/2a/04/0f/2a040f6fd57319510e6c7a027795cb1d.jpg" />
            </div>
            <div class="card-info">
                FORCE AWAKENS DEADPOOL-vector
                <br> Photo by Orlando Arocena on Behance
            </div>
        </div>

        <div class="card">
            <div class="card-image">
                <img src="https://s-media-cache-ak0.pinimg.com/564x/e7/66/c2/e766c2d243ed4b6962d71ba8b48ffddf.jpg" />
            </div>
            <div class="card-info">
                Breaking Bad by Guillaume
            </div>
        </div>
    </div>


    <script src="pinterestgrid.js"></script>
    <script type="text/javascript">
        (function() {
            'use strict';

            var grid = new PinterestGrid({
                container: '.cards',
                item: '.card',
                gutter: 10,
                delay: 200
            });

            window.addEventListener('resize', function() {
                grid.init();
            });

            Array.from(document.querySelectorAll('.card img')).forEach(function(item) {
                item.addEventListener('load', function() {
                    grid.init();
                    item.removeEventListener('load');
                }, false);
            });

        }());
    </script>
</body>

</html>

(function () {
    'use strict';
    
    var grid = new PinterestGrid({
        container: '.cards',
        item: '.card',
        gutt: 10,
        delay: 200
    });
    
    
} ());

body {
    color: #212121;
    font-size: 13px;
    font-family: 'Helvetica Neue', sans-serif;
    background: #ECEFF1;
    padding: 2em;
}

.cards {
    margin: auto;
    max-width: 700px;
}

.card {
    background: white;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-sizing: border-box;
    border-radius: 4px;
    display: inline-block;
    margin: 0 10px 10px 0;
    vertical-align: top;
    width: 160px;
    
    /* Animaciones */
    opacity: 0;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.card--loaded { opacity: 1; }

.card img { 
    border-radius: 4px 4px 0 0;
    width: 100%; 
}

.card-info {
    padding: 0.6em 1em;
}

(function(exports) {

    'use strict';

    function PinterestGrid(options) {
        this.settings = Object.assign({
            delay: 100,
            shorterFirst: true,
            gutter: 6
        }, options);
        this.loaded = false;
        this.transform = _getTransformProperty();

        // Objetos del DOM
        this.$container = (options.container instanceof Node) 
            ? options.container 
            : document.querySelector(options.container);
        if (!this.$container) return false;

        this.$itemCollection = (options.item instanceof NodeList) 
            ? options.item 
            : this.$container.querySelectorAll(options.item);
        if (!this.$itemCollection || this.$itemCollection.length === 0) return false;

        if (!this.loaded) {
            return this.init();
        }
    }
    
    PinterestGrid.prototype.init = function() {
        this.loaded = true;
        this.$container.style.width = '';
        
        var gutter = parseInt(this.settings.gutter);
        var containerWidth = this.$container.getBoundingClientRect().width;
        var itemsWidth = this.$itemCollection[0].getBoundingClientRect().width + gutter;
        var cols = Math.max(Math.floor((containerWidth - gutter) / itemsWidth), 1);
        
        containerWidth = (itemsWidth * cols + gutter) + 'px';
        this.$container.style.width = containerWidth;
        this.$container.style.position = 'relative';
        
        var itemsPosY = [];
        var itemsPosX = [];
        
        for (var i = 0; i < cols; i++) {
            itemsPosX.push(i * itemsWidth + gutter);
            itemsPosY.push(gutter);
        }
        
        Array.from(this.$itemCollection).forEach(function(item, i) {
            var firstItem, itemIndex, posX, posY;
            
            if (this.settings.shorterFirst) {
                firstItem = itemsPosY.slice(0).sort(function(a, b){ return a - b }).shift();
                itemIndex = itemsPosY.indexOf(firstItem);
            } else {
                itemIndex = i % cols;
            }
            
            posX = itemsPosX[itemIndex];
            posY = itemsPosY[itemIndex];
            
            item.style.position = 'absolute';
            item.style.webkitBackfaceVisibility = item.style.backfaceVisibility = 'hidden';
            item.style[this.transform] = 'translate3d(' + posX + 'px, ' + posY + 'px, 0)';
            
            itemsPosY[itemIndex] += item.getBoundingClientRect().height + gutter;
            
            if (!/loaded/.test(item.className)) {
                setTimeout(function() {
                    item.classList.add(item.className.split(' ')[0] + '--loaded');
                }, (parseInt(this.settings.delay) * i));
            }
            
        }.bind(this));
        
        var containerHeight = itemsPosY.slice(0).sort(function(a, b) { return a - b }).pop();
        this.$container.style.height = containerHeight + 'px';
        
        if (!/loaded/.test(this.$container.className)) {
            this.$container.classList.add(this.$container.className.split(' ')[0] + '--loaded');
        }
        
        if (typeof this.settings.callback === 'function') {
            this.settings.callback(this.$itemCollection);
        }
    };

    function _getTransformProperty() {
        var style = document.createElement('div').style;
        var transform;
        var vendorProp;

        if (undefined !== style[vendorProp = 'webkitTransform']) {
            transform = vendorProp;
        }

        if (undefined !== style[vendorProp = 'msTransform']) {
            transform = vendorProp;
        }

        if (undefined !== style[vendorProp = 'transform']) {
            transform = vendorProp;
        }

        return transform;
    }

    // AMD
    if (typeof define === 'function' && define.amd) {
        define(function() {
            return PinterestGrid
        });
    }

    // CommonJS
    else if (typeof module !== 'undefined' && module.exports) {
        module.exports = PinterestGrid;
    }

    // Global
    else {
        exports.PinterestGrid = PinterestGrid;
    }
}(this));