基于angularjs的瀑布流插件angular-waterfull.js

最近的项目中，是用angularjs写的，领导要求，其中的效果都用angular去写。

这不，对接数据后就遇到问题啦，关于瀑布流的问题。

之前是用的masonry.js这个插件，这个插件也很好，但是在与后台对接后，布局就乱了，我是百思不得其解，为什么对接前好好的，对接后就不行啦。。。

后来就找呀找，也试了很多其他插件，虽然都是打着angularjs的名义，但是个人试用了几个，没有效果，不知道是不是我的水平问题，反正我是没有搞出来。

最后终于找到angular-waterfull.js这个插件。在一番修改之下，最后终于如愿以偿。

这是原文地址：angular-waterfull.js  万能的github。

引入js文件

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-waterfall.js"></script>

然后，模块注入

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

注意，这个地方中括号里面的ui.router是另一个js（angular-ui-router.min.js）文件里的，如果不需要这个js文件可以去掉ui.router，只写

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

然后就是html这部分啦

<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>

注意，这部分是用的ul,li标签，我当时写的时候用的div,出现报错，这部分，大家写的时候要注意下，如果自己写的标签没有用ul，li出现报错，不放换回来试试。

在github上提供的下载文件，里面没有angular.js文件和angular-ui-router.min.js文件，大家在试看效果的时候，要补齐插件，也可以删掉相对应的代码，不然会报错而没有内容。

这个机遇angularjs的瀑布流插件，正好满足我们的项目要求，所以我个人认为非常好，另外一个好处在于它提供监听滚轮事件的方法，使push后的数据依然遵循瀑布流规则，之前我尝试的几个插件都没有满足这个要求，也可能是我水平问题，没有试出来。

下面是它的监听滚轮事件加载新数据的方法：

page++;

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

如果你需要用滚轮滚到底部加载，可以用这个方法，如果不需要，那就用上面的代码的那部分

<div class="loadMore" ng-if="loadMore" ng-infinite-scroll ng-click="loadMoreData()">{{text}}</div>

点击事件加载新数据。

提供的下载文件里main.js有相关的代码，大家可以看看。

总之，这个插件是很不错的。