adswebwork / angular-masonry-fly Goto Github PK

####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!