gothick / omm

const $ = require('jquery');

const Masonry = require('masonry-layout');

const imagesLoaded = require('imagesloaded');

$(function() {

    var msnry = new Masonry( '.gallery', {

        itemSelector: '.grid-item',

        gutter: 12

    });

    // layout Masonry after each image loads, and also keep it

    // as well-hidden as possible until then by hiding its

    // metadata div

    $('.grid-item .metadata').hide();

    imagesLoaded(document.querySelector('.gallery'))

        .on('progress', function(instance, image) {

            $(image.img).closest('.grid-item').find('.metadata').show();

            msnry.layout();

        });

});