angularjs学习记录--使用纯angularjs写的另类瀑布流布局

因公司原网站改造升级，使用angularjs框架，前一版网站中的很多交互功能都是用jq写的，升级为angularjs之后简直是死的心都有了，这个瀑布流布局困扰了我好几天，今天终于写出个大概来，目前还有些小BUG，暂时还解决不了，发出来希望大家帮我看看。

代码：services方法

var ekuService = angular.module("ekuServices", ["ngResource"]);

ekuService.factory('ekuServices', function( $resource ){

return $resource(

"data/:id.json"

);

});

代码：控制器

// weater falls

ekuCtl.controller("weaterFalls", function( $scope, ekuServices ) {

ekuServices.get({id:"falls"},function(falls) {

//初始化数组容器

$scope.newList = [];

// 计算返回数据长度

var num = Math.ceil( falls.fall.length / $scope.fallList );

// 创建瀑布流列布局

for( var i=0; i<$scope.fallList; i++ ) {

$scope.newList.push( [] );

}

// 排序

falls.fall.sort();

// 使用递归方法重组数据并push到容器里

var reData = function() {

for( var j=0; j<falls.fall.length; j++ ) {

if( j == $scope.fallList ) {

falls.fall.splice(0,j)

reData();

}else{

$scope.newList[j].push( falls.fall[j] )

};

};

};

reData();

});

代码：HTML页面

<!-- 瀑布流布局 -->

<div class="col-average-5" ng-init="fallList=5"
id="falls" ng-controller="weaterFalls">

<div ng-repeat="a in fallList">

<div class="fall-warp pull-center" ng-repeat="wf in fallList[$index] " >

<ul class="fall-work"><a ng-href="{{wf.workLink}}"><img ng-src="images/works/{{wf.img}}" alt="{{wf.name}}"></a></ul>

<ul class="fall-state">

<li><a ng-href="wf.workLink" ng-bind="wf.name">作品名</a></li>

<li class="row">

<p class="layout-30">

<i class="iconfont"></i>{{wf.like}}

</p>

<p class="layout-30">

<i class="iconfont"></i>{{wf.comment}}

</p>

<p class="layout-30">

<i class="iconfont"></i>{{wf.view}}

</p>

<p class="layout-10">

<i class="iconfont"></i>

</p>

</li>

</ul>

<ul class="fall-author">

<a ng-href="{{wf.authorLink}}"><img ng-src="images/author/{{wf.authorimg}}" alt="头像"></a>

<a ng-href="{{wf.authorLink}}">{{wf.author}}<i></i></a>

</ul>

</div>

</div>

</div>

大致说一下制作思路及实现方式：

思路：

1、通过ngResource获取到JSON格式的数据源。

2、获取瀑布流列数

3、使用resource的数据集 / 瀑布流列（获得行数）

4、创建数组，将源数据拆分成二组数据（根据列数定制长度）

5、页面PUSH

实现过程：HTML

1、首先自定CSS样式class="col-average-5"（此元素下的直接子元素为5列布局，如果要实现4列或多列更改css样式即可）

2、ng-init="fallList=5"是进行源数据数组重组时使用，根据fallList的变量进行多维数据创建

3、整个过程为两次ng-repeat循环，第一次使用ng-repeat="a in fallList"循环class="col-average-5"下的直接子元素（即瀑布流的列数，本例为5列）。第二次循环每列相应的列表内容（此处使用源数据重组后的数组）ng-repeat="wf in fallList[$index]
"

控制器：controller部分

4、创建数据容器$scope.newList = [];，有两个用处（1：创建瀑布流布局；2：将处理过的数据装载到容器里）

5、排序，基本无用

6、使用递归方法将源数据分别插入到newList容器里

结束！

效果图：