1 Star 0 Fork 17

紫水流枫 / ngFlowGrid

forked from eisneim / ngFlowGrid 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
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

空文件

简介

AngularJS控制的自适应瀑布流布局(无jquery依赖) 展开 收起
JavaScript
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/ZiShuiLiuFeng/ngFlowGrid.git
git@gitee.com:ZiShuiLiuFeng/ngFlowGrid.git
ZiShuiLiuFeng
ngFlowGrid
ngFlowGrid
master

搜索帮助

14c37bed 8189591 565d56ea 8189591