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">&#xe618;</i>{{wf.like}}
                            </p>
                            <p class="layout-30">
                                <i class="iconfont">&#xe616;</i>{{wf.comment}}
                            </p>
                            <p class="layout-30">
                                <i class="iconfont">&#xe61a;</i>{{wf.view}}
                            </p>
                            <p class="layout-10">
                                <i class="iconfont">&#xe60f;</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容器里

结束！

效果图：