angular-gridify

Angular directive that creates a justified grid of elements

Installation

npm i -D angular-gridify

or

bower i -S angular-gridify

Demo

http://homerjam.github.io/angular-gridify/

Usage

See example for more extensive instruction.

Important!

A ratio attribute is required on the collection items to calculate layout, this should be the result of width / height.

Basic usage example:

module.controller('MyCtrl',function($scope,$window){varctrl=this;ctrl.getPerRow=function(){return$window.innerWidth>1000 ? 3 : 2;};ctrl.collection=[// items here];});

<divng-controller="MyCtrl"><hj-gridifyhj-gridify-options="{ collection: ctrl.collection, perRow: ctrl.getPerRow, averageRatio: 1.5, gutter: 10, }"><divclass="tile">
Tile contents
</div></hj-gridify></div>