pinterest layout like image grid for AngularJS app (no jquery dependency )

Module License: MIT

Added by: Sam Deering





Stars: 66

Watchers: 66

Forks: 15

Module Description


pinterest layout like responsive image grid for AngularJS app with no jQuery dependency;


#Installation 1.include angularJS and ngFlowGrid to your page:

<script src="path/angular.min.js"></script>
<script src="src/ngFlowGrid.js"></script>

2.add ngFlowGrid to your app's dependency:

var myApp = angular.module('myAppName', ['ngFlowGrid']);

3.use ngFlowGrid directive in you html code:

<ul class="flowGrid" ng-flow-grid="homePageGrid" min-item-width="200">
    <li class="flowGridItem" ng-repeat="item in items">
        <a href=""><img ng-src="{{item.img}}"></a>

4.add some basic css to format the layout

*{box-sizing: border-box;}
    content: "";
    display: table;
.flowGridItem{ margin-bottom:10px;}
.flowGridItem img{width:100%;}
    float: left;
    padding-left: 10px;
    padding-right: 10px;

5.control the grid in your controller:

    $scope.updateGrid = function(){
        var homePageGrid = fgDelegate.getFlow('homePageGrid');
        // then you can:
        homePageGrid.minItemWidth += 20;


take look at demo app;

#Directive options ###ngFlowGrid give a name for your grid, so that you can controll mutil grid in one page. ###itemSelector(default:'.flowGridItem') ###minItemWidth(default:150) this value will affect how many columns you have, the smaller it is the more columns there will be;

#Service through fgDelegate service you can get flow object and controll it in your controller or directive:

###new(option) options are:

  • container: container element.
  • name: string,the name of new grid.
  • itemSelector: string
  • minItemWidth: number, this will affect how many columns in grid;

###getFlow(name) this will return a flowgrid object ,and you can controll that grid throght this object

  • minItemWidth:number
  • container:element
  • autoCalculation: boolean
  • columnsHeights: array
  • itemsHeights: object
  • items: array of element
  • refill([forceRefill]): calculate culums based on minItemWidth,and put items into columns; [forceRefill]:boolean;
  • itemsChanged(): tell flow grid you have added or removed items in your controller; before you call this method, make sure ngRepeat is finished rendering ,so you should call it like this:
    // make sure ngRepeat is finished rendering
  • empty() : remove all items inside of columns

Module stats last updated: 2017-02-21 16:00:06

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!