takahashiakira
8/15/2016 - 4:17 AM

Masonry & ImagesLoaded

Masonry & ImagesLoaded

Masonry with ImagesLoaded (CommonJS)

$ npm install masonry-layout
$ npm install imagesloaded

ImagesLoaded with Masonry

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

const masonryClass = '.jsMasonry';
const masonryListClass = '.jsMasonryBox';
const masonryOptions = {
  itemSelector: masonryListClass,
  columnWidth: masonryListClass,
  percentPosition: true,
  transitionDuration: '0.2s'
};

imagesLoaded(masonryClass, () => {
  new Masonry(masonryClass, masonryOptions);
});

Reload Masonry (for SPA)

msnry.reloadItems();
msnry.layout();