bower, require.js, masonry & imagesloaded

Wanna run masonry with imagesloaded in require.js, powered by bower?

Try this gist!

First create your bower.json file and run bower install

{
  "name": "bower-masonry-imagesloaded-requirejs",
  "version": "0.0.0",
  "dependencies": {
    "requirejs": "~2.1.8",
    "jquery": "~1.10.2",
    "masonry": "~3.1.2",
    "imagesloaded": "~3.0.4"
  }
}

Then configure require.js

require.config({
    paths: {
        jquery: '../bower_components/jquery/jquery',
        eventie: '../bower_components/eventie',
        'doc-ready': '../bower_components/doc-ready',
        eventEmitter: '../bower_components/eventEmitter',
        'get-style-property': '../bower_components/get-style-property',
        'get-size': '../bower_components/get-size',
        'matches-selector': '../bower_components/matches-selector',
        outlayer: '../bower_components/outlayer',
        masonry: '../bower_components/masonry',
        imagesloaded: '../bower_components/imagesloaded'
    }
});

and then code the app:

define(['masonry/masonry', 'imagesloaded/imagesloaded'], function(Masonry, imagesLoaded) {
    $(document).ready(function() {
        var container = document.querySelector('#masonry');
        imagesLoaded(container, function() {
           var msnry = new Masonry(container, {
               columnWidth: 200,
                gutter: 20,
                itemSelector: '.item',
                isFitWidth: true
           });
             
       });
    });
});

Its scrabbled together from http://masonry.desandro.com/appendix.html and various StackOverflow posts.