This action will force synchronization from eisneim/ngFlowGrid, which will overwrite any changes that you have made since you forked the repository, and can not be recovered!!!
Synchronous operation will process in the background and will refresh the page when finishing processing. Please be patient.
pinterest layout like responsive image grid for AngularJS app with no jQuery dependency;
#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
: stringminItemWidth
: 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
:numbercontainer
:elementautoCalculation
: booleancolumnsHeights
: arrayitemsHeights
: objectitems
: array of elementrefill([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此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。