####Generates masonry layout image by image without knowing their height or waiting for all images to load.
- Works with infinite scroll and window resizing.
- No need to know images height or wait for all images to download.
- Can be used on same page on different containers(new)
#####DEMO http://bimal1331.github.io/angular-masonry-fly
#####REQUIREMENTS
- Angularjs 1.2+ only
#####INSTALLATION
- Download angular-masonry.min.js and include it with your JS files.
- Include module masonryLayout in your main app module.
or
use Bower to install bower install angular-masonry-fly
#####USAGE
-
Use directive data-masonry like below -
<div data-masonry data-x-margin="20" data-y-margin="30" data-img-width="250" style="margin:3% 2% 0 2%; padding: 20px 1% 0; border:1px solid black; width:43%; float:left;"> <div data-ng-repeat="image in images" style="border:1px solid black; border-radius:5px; padding:1px;"> <img ng-src="http://lorempixel.com/{{image.src}}"> </div> </div>
- data-x-margin - Horizontal gap between image containers
- data-y-Margin - Vertical gap between image containers
- data-img-width - Image width you'll be using for the layout, ideally should be image's natural width
That's it!