dongdeyu/angular-waterfall

a responsive waterfall plugin of angular

angular-waterfall

a responsive waterfall plugin of angular
定列自适应瀑布流指令

options

• contentWidth(optional) 外层容器宽度，不设则auto
• cols(optional) 指定显示列数，默认6

example

1.模块注入

    angular.module('angularWaterfallApp',["ngWaterfall","ui.router"])

2.模板

<ul class="waterfall-list" ng-waterfall cols="6">
        <li ng-repeat="image in images" repeat-finished>
            <div class="data-block">
                <img src="{{image.url}}" alt="{{image.summary}}"/>
                <p>{{image.title}}</p>
                <p>{{image.summary}}</p>
            </div>
        </li>
        <div class="loadMore" ng-if="loadMore" ng-infinite-scroll ng-click="loadMoreData()">{{text}}</div>
    </ul>
    

3.controller

    page++;
    $scope.$on("waterfall:loadMore",function(){//滚动自动填充事件
            $scope.loadMoreData();
    })