I did a very rough integration for a prototype. The code below is a good starting point, but more work will be needed depending upon how users interact with the content.
This assumes you've already got a working ember page with an ArrayController ready to render.
Here is the View that utilizes masonry:
App.HomeView = Ember.View.extend({
onDidInsertElement: function() {
this.reMason();
}.on('didInsertElement'),
onWillDestroy: function() {
this.$('.masonry').masonry('destroy');
}.on('willDestroy'),
reMason: function() {
this.$('.masonry').masonry({
// masonry init options here
});
this.$('.masonry').imagesLoaded( function() {
this.$('.masonry').masonry();
}.bind(this));
}
});
Here is the template where we render the masonry html
<script type="text/x-handlebars" data-template-name="homeView">
...
<div class="masonry">
{{#each}}
// render each masonry item here.
{{/each}}
</div>
...
</script>