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

戚俊健
2023-12-01

最近的项目中,是用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有相关的代码,大家可以看看。

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

 类似资料: