gistfile1.html

<script src="//cdn.getchute.com/v3/chute.min.js" data-load="view"></script>
<!-- Template for a container element -->
<script class="container-template" type="application/x-template">
  <div class="assets"></div>
</script>
<!-- Template for a single image -->
<script class="item-template" type="application/x-template">
	<div class="asset">
		<img src="{{ asset.url }}/w/200">
	</div>
</script>
<script>
Chute.ready(function(){
	// run when all dependencies were loaded
	// view component in this case, specified in data-load attribute of including script
	
	var WallItemView = Chute.View.extend({ // view for a single data item
		template: 'script.item-template' // specifying template via selector
	});
	
	var WallView = Chute.CollectionView.extend({ // view for a data collection
		template: 'script.container-template',
		itemView: WallItemView, // pointing to the view for every data item in the collection
		dependencies: { // setting js & css dependencies, will be loaded asynchronously
			js: ['/assets/components/wall/jquery.wookmark.min.js', '/assets/components/wall/jquery.imagesloaded.min.js'],
			css: ['/assets/components/wall.css']
		},
		
		initialize: function(){ // custom initialize function
			this.on('render', $.proxy(this.initWookmark, this)); // initialize wookmark when view was rendered
		},
		
		initWookmark: function(){
			var self = this;
			
			this.$el.imagesLoaded(function(){ // waiting for all images to load
				self.$el.find('div.asset').wookmark($.extend({}, { container: self.$el }, self.options.options.wookmark));
				self.trigger('wookmark:init'); // emitting custom event, for convenience
			});
		}
	});
	
	var wall = new WallView({
		data: new Chute.API.Assets({ album: '9IZukfpi' }).toData(), // set of images
		container: 'div.wall', // insert wall into div.wall
		options: { // custom options for wookmark plugin
			wookmark: {
				offset: 2,
				itemWidth: 210
			}
		}
	});
});
</script>

<div class="wall"></div>