AngularJS module for ademilter's bricklayer, a lightweight & independent cascading grid layout library

• Simple demo on GitHub
• Simple demo on Plnkr
• Demo with images from flickr (made with apiNG)

1. Install via either bower, npm or downloaded files:

   1. via bower: bower install --save angular-bricklayer
   2. via npm: npm install --save angular-bricklayer
   3. via CDN (jsDelivr)
   4. via downloaded files

2. Include dependencies and angular-bricklayer in your HTML.

   1. When using bower

   <link rel="stylesheet" href="bower_components/bricklayer/dist/bricklayer.min.css"> <script src="bower_components/bricklayer/dist/bricklayer.min.js"></script> <script src="bower_components/angular-bricklayer/dist/angular-bricklayer.min.js"></script>

   2. When using npm

   <link rel="stylesheet" href="node_modules/bricklayer/dist/bricklayer.min.css"> <script src="node_modules/bricklayer/dist/bricklayer.min.js"></script> <script src="node_modules/angular-bricklayer/dist/angular-bricklayer.min.js"></script>

   3. When using CDN

   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.3/bricklayer.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.3/bricklayer.min.js"></script> <script src="//cdn.jsdelivr.net/npm/angular-bricklayer@1.1.0/dist/angular-bricklayer.min.js"></script>

   4. When using downloaded files

   <link rel="stylesheet" href="YOUR_PATH/bricklayer.min.css"> <script src="YOUR_PATH/bricklayer.min.js"></script> <script src="YOUR_PATH/angular-bricklayer.min.js"></script>

3. Add jtt_bricklayer to your application's module dependencies, like this:

   angular.module('app', ['jtt_bricklayer']);

Create a simple list and set the css class bricklayer like this

<div class="bricklayer" ng-cloak> <div>Your item</div> <div>Your another item</div> <div>Your another but long item</div> <div>Your another but very short item</div> <div>Your one more item</div> <div>Your smallest item</div> </div>

Define bricklayer column size:

@media screen and (min-width: 1200px) { .bricklayer-column-sizer { /* divide by 3. */ width: 33.3%; } } @media screen and (min-width: 768px) { .bricklayer-column-sizer { /* divide by 2. */ width: 50%; } }

Use bricklayer-append or bricklayer-prepend as attribute, class or element name inside of your bricklayer instance

<div class="bricklayer" ng-cloak> <!-- append --> <div bricklayer-append ng-repeat="item in appendData" ng-cloak></div> <!-- prepend --> <div bricklayer-prepend ng-repeat="item in prependData" ng-cloak></div> </div>

Since v1.1.0 the grid gets redrawn when images have been loaded, by including and using desandro's imagesloaded

MIT