masonry-fly | Angular directive for masonry image layout

masonry-fly directive

masonry-fly

Stars : 10

Forks : 10

Created by Bimal Kumar

bower install angular-masonry-fly

Demo Download GitHub

angular-masonry-fly

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!

Javscript

Javascript plugin

Angular-js