An Angularjs module for simple masonry grid layout

Added by: Sam Deering





Stars: 0

Watchers: 0

Forks: 0

Module Description


An Angularjs module for simple masonry grid layout

###Example ####HTML

<form ng-init="staCKed={'min_width':200, 'max_width':400, 'sort_key':'number', 'sort_direction':'desc'}">
    <div class="form-group">
        <label>Minimum width</label>
        <input class="form-control" ng-model="staCKed.min_width" type="text" style="display:block;" />
    <div class="form-group">
        <label>Maximum width</label>
        <input class="form-control" ng-model="staCKed.max_width" type="text" style="display:block;" />
    <div class="form-group">
        <label>Sort key</label>
        <input class="form-control" ng-model="staCKed.sort_key" type="text" style="display:block;" />
    <div class="form-group">
        <label>Sort direction</label>
        <input class="form-control" ng-model="staCKed.sort_direction" type="text" style="display:block;" />
    <br />
<div stacked stacked-items="app.items_to_stack" stacked-template-url="/bower_components/ckc-angularjs-stacked/views/sample_stacked.html" stacked-min-width="{{staCKed.min_width}}" stacked-max-width="{{staCKed.max_width}}" stacked-sort="{{staCKed.sort_key}}" stacked-sort-direction="{{staCKed.sort_direction}}"></div>



###Options All options are defined in the HTML markup

  • stacked-items - The items to stack.
  • stacked-template-url - A URL to a template file.
  • stacked-min-width - The smallest you want the columns to be.
  • stacked-max-width - The largest you want the columns to be.
  • stacked-sort - The key in which to sort the items. Can be a string, date, or integer.
  • stacked-sort-direction - The direction to sort the items.


  • Bower - ckc-angularjs-stacked
  • Add "ckc-stacked" to your app's dependencies
  • Add "flash_message" to your app's controller dependencies
  • Add "stacked.min.js" and optionally "stacked.min.css" to your scripts/css
  • Add "stacked" attribute to your container markup

Module stats last updated: 2015-04-15 19:34:48

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!