angular-masonry

AngularJS Directive for Masonry Layout by David DeSandro

Usage

Browserify

install from npm

npm install --save ng-masonry 

require module

var ngMasonry = require('ngMasonry')

attach module to application

var app = angular.module('app', [ngMasonry]);

Manually

include in HTML

<script src="angular.js"></script>
<script src="angular-masonry.js"></script>

attach to application

var app = angular.module('app', ['ngMasonry']);

Example

Any options listed in Masonry website can be used in the 'data-masonry-options' attribute

<div data-masonry data-masonry-options='{ "columnWidth": 200 }'>
    <div data-masonry-item data-ng-repeat="item in list">
        {{ item }}
    </div>
</div>

Credits

This directive is created based on Masonry Layout by David DeSandro