angular-gridify

Angular directive that creates a justified grid of elements

Installation

bower install angular-gridify --save

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) {
    var ctrl = this;
 
    ctrl.getPerRow = function() {
        return $window.innerWidth > 1000 ? 3 : 2;
    };
 
    ctrl.collection = [
        // items here
    ];
});

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