Watch 32 Star 51 Fork 17

eisneim / ngFlowGridJavaScript

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
AngularJS控制的自适应瀑布流布局(无jquery依赖) spread retract

Clone or download


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



bower install ngFlowGrid#latest

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

Comments ( 0 )

Sign in for post a comment


Help Search