AngularJS module for ademilter's bricklayer, a lightweight & independent cascading grid layout library
Install via either bower, npm or downloaded files:
bower install --save angular-bricklayer
npm install --save angular-bricklayer
Include dependencies and angular-bricklayer in your HTML.
<link rel="stylesheet" href="https://github.com/JohnnyTheTank/angular-bricklayer/blob/master/bower_components/bricklayer/dist/bricklayer.min.css">
<script src="https://github.com/JohnnyTheTank/angular-bricklayer/raw/master/bower_components/bricklayer/dist/bricklayer.min.js"></script>
<script src="https://github.com/JohnnyTheTank/angular-bricklayer/raw/master/bower_components/angular-bricklayer/dist/angular-bricklayer.min.js"></script>
<link rel="stylesheet" href="https://github.com/JohnnyTheTank/angular-bricklayer/blob/master/node_modules/bricklayer/dist/bricklayer.min.css">
<script src="https://github.com/JohnnyTheTank/angular-bricklayer/raw/master/node_modules/bricklayer/dist/bricklayer.min.js"></script>
<script src="https://github.com/JohnnyTheTank/angular-bricklayer/raw/master/node_modules/angular-bricklayer/dist/angular-bricklayer.min.js"></script>
<link rel="stylesheet" href="https://github.com/JohnnyTheTank/angular-bricklayer/blob/master//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.3/bricklayer.min.css">
<script src="https://github.com/JohnnyTheTank/angular-bricklayer/raw/master//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.3/bricklayer.min.js"></script>
<script src="https://github.com/JohnnyTheTank/angular-bricklayer/raw/master//cdn.jsdelivr.net/npm/angular-bricklayer@1.1.0/dist/angular-bricklayer.min.js"></script>
<link rel="stylesheet" href="https://github.com/JohnnyTheTank/angular-bricklayer/blob/master/YOUR_PATH/bricklayer.min.css">
<script src="https://github.com/JohnnyTheTank/angular-bricklayer/raw/master/YOUR_PATH/bricklayer.min.js"></script>
<script src="https://github.com/JohnnyTheTank/angular-bricklayer/raw/master/YOUR_PATH/angular-bricklayer.min.js"></script>
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