1 Star 0 Fork 17

LegendTian / ngFlowGrid

forked from eisneim / ngFlowGrid 
Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README

ngFlowGrid

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

preview

#Installation

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>
		<h2>{{item.description}}</h2>
	</li>
</ul>

4.add some basic css to format the layout

*{box-sizing: border-box;}
.flowGrid:before,.flowGrid:after{
	content: "";
	display: table;
}
.flowGrid:after{
	clear:both;
}
.flowGridItem{ margin-bottom:10px;}
.flowGridItem img{width:100%;}
.flowGridColumn{
	float: left;
	padding-left: 10px;
}
.flowGridColumn:last-of-type{
	padding-right: 10px;
}

5.control the grid in your controller:

app.controller('appCtrl',['$scope','fgDelegate',function($scope,fgDelegate){
	
	$scope.updateGrid = function(){
		var homePageGrid = fgDelegate.getFlow('homePageGrid');
	
		// then you can:
		homePageGrid.minItemWidth += 20;
    	homePageGrid.refill(true);
	}

}]);

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
	$scope.$watch('$last',function(){
		fgDelegate.getFlow('demoGrid').itemsChanged();
	});
  • empty() : remove all items inside of columns

Empty file

About

AngularJS控制的自适应瀑布流布局(无jquery依赖) expand collapse
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
1
https://gitee.com/LegendTian/ngFlowGrid.git
git@gitee.com:LegendTian/ngFlowGrid.git
LegendTian
ngFlowGrid
ngFlowGrid
master

Search

14c37bed 8189591 565d56ea 8189591