基于angularjs的瀑布流插件angular-waterfull.js
来源:互联网 发布:阿里云解析教程 编辑:程序博客网 时间:2024/04/19 09:37
最近的项目中,是用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有相关的代码,大家可以看看。
总之,这个插件是很不错的。
0 0
- 基于angularjs的瀑布流插件angular-waterfull.js
- 关于angular瀑布流插件ng-infinite-scroll.min.js遇到一个奇葩问题
- 【每日一发】基于JS的图片瀑布流
- angularjs 瀑布流
- angular-drag - 基于Angularjs的拖拽指令
- js的瀑布流效果
- JS实现的瀑布流
- 基于angular.js的回到顶部指令
- 【AngularJS】 1. Angular JS的五大特性
- 【AngularJS】 1. Angular JS的五大特性
- [AngularJS] 1. Angular JS的五大特性
- 【js类库AngularJs】解决angular+springmvc的post提交问题
- 【js类库AngularJs】解决angular的post提交问题
- 【js类库AngularJs】解决angular+springmvc的post提交问题
- AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析
- AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析
- HTML5开发动态网格布局的jQuery插件BlocksIt.js 瀑布流
- kissy waterfall插件实现的瀑布流
- 转行程序员1 机器学习 线性回归 Linear Regression 纯属敦促自己学习
- 线程安全知识
- 什么牌子的视频会议系统好?
- multer中间件上传文件
- PHP/Java Bridge:PHP extend继承Java的interface,Java的interface直接在PHP实现
- 基于angularjs的瀑布流插件angular-waterfull.js
- Android Service与Activity之间通信使用Messenger方式
- Unity3d 和 3dmax轴向问题以及快速解决方案
- 虚函数调用
- Linux中的15个‘echo’ 命令实例
- Java transient关键字使用小记
- UVALive - 3902 Network 无根树转为有跟树+搜索+贪心
- xapp1052之dma_test.v
- redis集群搭建手册