angular-masonry-fly

Generates masonry layout without knowing images height or waiting for them to load.

Homepage

Angular Core Dependency: ~1.2.17

Module License: MIT

Added by: Sam Deering

GitHub

Repository

bimal1331/angular-masonry-fly

Stats

Stars: 84

Watchers: 84

Forks: 12

Author

Bimal Kumar
Bimal Kumar

Module Description

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!

Module stats last updated: 2017-05-21 16:00:03

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!