资讯专栏INFORMATION COLUMN

angular组件-特殊的瀑布流(原创)

Yi_Zhi_Yu / 2808人阅读

摘要:正如上篇文章说的,由于项目中的样式有点特殊要求,所以自己在项目中写了一个瀑布流组件,在这里分享下,由于最近没太多时间,趁中秋把这个组件发上来,写的不是很详细,毕竟中秋,我的心已经发出去啦。

ng-water-scroll

正如上篇文章说的,由于项目中的样式有点特殊要求,所以自己在项目中写了一个瀑布流组件,在这里分享下,由于最近没太多时间,趁中秋把这个组件发上来,写的不是很详细,毕竟中秋,我的心已经发出去啦。有问题的可以留言,多谢大家支持

写完这篇指令估计不会再写关于ng1.x的文章了,我会把重心放在ng2,多谢大家支持

使用这个指令来实现瀑布流的效果,但是这个指令适用有局限性,当你需求满足以下几点的时候,你可以使用这个指令来完成瀑布流效果,如果你发现你的需求不满足以下条件,你可以尝试下 ngInfiniteScroll

滚动的容器高度固定

Demo

Demo

Bower
    bower install --save-dev ng-water-scroll
Usage

    
           
    
waterScroll Parameters

scroll-distance: 触发scroll-load方法的距离,该距离代表滚动条距离底部的高度,目前只支持像素范围,只需输入数字,不需要输入单位

scroll-load: 当滚动到合适的距离时,他会触发这个的方法

scroll-container: 指定数据存贮的容器

loadding-info: 当数据加载时,出现加载数据html片段

load-disabled: 是否允许数据加载

Event

scrollLoadingFinfish 数据加载完成

stopLoading 停止继续加载数据

startLoading 重新开始加载数据

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80357.html

相关文章

  • angular组件(ngKeybordSelect)-通过键盘实现多选

    摘要:在刚刚结束的交易系统项目中有几个需求是让我感觉要花点时间的如何更优雅的使用的框。通过键盘实现多选,批量选的功能。所以自己写了后面两个指令。 在刚刚结束的angular交易系统项目中有几个需求是让我感觉要花点时间的 如何更优雅的使用angular-bootstrap 的 Modal框。 通过键盘实现ctrl多选,shfit批量选的功能。 如何在angular去实现瀑布流 后面两个我都...

    novo 评论0 收藏0
  • Webpack + Angular组件化实践

    摘要:最近写复旦二手平台的时候开始尝试用一直推崇了很久的组件化。经过一番抉择之后选择了的组合。所以在这里分享一下具体的实践流程。自己有自己独特的依赖注入以及模块声明方式,看起来似乎和是水火不容的,但事实上他们完全可以融合。 最近写复旦二手平台的时候开始尝试用一直推崇了很久的组件化。经过一番抉择之后选择了 webpack + angular 的组合。所以在这里分享一下具体的实践流程。 Web...

    neuSnail 评论0 收藏0
  • 瀑布插件Masonry配置和使用

    摘要:是最流行的瀑布流插件之一,配置简单,功能强大,在上收获了。如果你想使用瀑布流提升网站体验,将是不错的选择。瀑布流,又称瀑布流式布局。需要注意的是,如果你需要加载图片,不会在图片加载完后重新布局,这可能会影响你的布局效果,建议配合使用插件。 Masonry是最流行的瀑布流插件之一,配置简单,功能强大,在Github上收获了1w+ stars。如果你想使用瀑布流提升网站体验,Masonry...

    waterc 评论0 收藏0
  • 瀑布插件Masonry中文文档【翻译】

    摘要:本位为官方文档翻译,原始链接安装下载下载压缩或未压缩的压缩未压缩在直接饮用文件。排列未加载完成的图片时会导致元素的重叠,可以解决这个问题。布局组件尺寸尺寸配置项和可以可以设置组件的列宽和间距。增加移除控件在瀑布流末尾增加新控件并重排。 本位为Masonry官方文档翻译,原始链接 安装Install 下载 下载压缩或未压缩的masonry masonry.pkgd.min.js (压缩...

    soasme 评论0 收藏0
  • 用vue.js写一个瀑布组件

    摘要:有三个参数将被渲染的元素是一个,在渲染子元素的合适时机例如的事件里,调用即可。从里面拿到一个元素,找出当前高度最小的一列,将放入该列。渲染,然后调用方法进入瀑布流还有个常见的功能就是滚动加载了,目前尚未加入此功能,会尽快加上。 很少写文章,很乱,,见谅。 我所见过的瀑布流都是固定的几列,然后每一列包含若干个元素(图文元素),每一列的总高度都差不多。所以我这个组件的功能就很简单,可以设...

    AlphaWallet 评论0 收藏0

发表评论

0条评论

Yi_Zhi_Yu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<