Very lightweight Masonry Absolute Div Stack Generation(images height being returned from server)
2 people use it
Author: 2930262?v=3 bimal1331


1) Generates masonry(pinterest type) layout. Works on window resizing too. See the demo. 2) For efficiency, this module utilises the image's heights being returned with images data from the server, so that there is no delay waiting for the images to load. It generates the containers as soon as it gets the images data from the server. 3) Generating 1000 containers on chrome takes around 160ms. 4) Size - 2.13KB(minified)

I will be soon launching a version which works without images height being returned from the server and it does not wait for all images to load. It generates layout on the fly.


REQUIREMENTS :- 1) Angularjs only

INSTALLATION :- 1) Download angular-masonry.min.js and include it with your JS files. 2) Include module 'masonryLayout' in your main app module.

USAGE :- 1) In your app's 'RUN block', connfigure masonry module like below - $rootScope.masonryData = { xMargin : 30, yMargin : 40, imgWidth : 323, containerPadding : 23 };

2) Store images on your scope in 'images' object, with image height stored in 'height' property - $scope.images = [{height: 234, ...}, {height: 342, ...}, {height: 256, ...} ......];

3) Use directives 'data-masonry-layout' & 'data-masonry-resize' like below -

That's it!

comments powered by Disqus
This page was last updated over 2 years ago.