angular-columnify

Angular directive that creates balanced columns

Usage

1. Add hj.columnify to your app dependencies

2. Add .column style declaration to your css

    .column {
        float: left;
        width: 50%; /* 50% for two columns, 33.33% for three etc */
    }

3. Add hj-columnify directive to your template, it works just like ng-repeat

    <div hj-columnify="item in items">

        <div class="box" data-index="{{$index + 1}}">

            Content goes here

        </div>

    </div>

Installation

npm i -S angular-columnify

Demo

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