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.