同步操作将从 eisneim/ngFlowGrid 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
pinterest layout like responsive image grid for AngularJS app with no jQuery dependency;
#Installation 1.include angularJS, jquery 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="homePageGird" 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.controll the gird in your controller:
app.controller('appCtrl',['$scope','fgDelegate',function($scope,fgDelegate){
$scope.updateGrid = function(){
var homePageGrid = fgDelegate.getFlow('homePageGird');
// 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('demoGird').itemsChanged();
});
empty()
: remove all items inside of columns此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。