摘要：不需知道元素宽高，可宽高自适应自定义程度高支持懒加载提供端滑动到底部触发，端需要上拉触发使用极为简便适用于有问题欢迎提前端工程化算法注意需要与一起使用才会生效，否则会进行自适应宽度使用布局时，需先计算出自适应后的宽度再传值使用了的
vue-waterfall2
1.不需知道元素宽高，可宽高自适应
2.自定义程度高
3.支持懒加载(lazy-src)
4.提供Event:loadmore (pc/android端滑动到底部触发，ios端需要上拉触发)
5.使用极为简便,适用于PC/ios/android
有问题欢迎提issues、suggestions;Thank you for your Star !
welcome to my blog(JS/前端工程化/Python/算法) ！！！
Common Demo
Lazyload Demo
GITHUB
npm i npm run devInstallation
npm i vue-waterfall2@latest --saveUsage
注意:
gutterWidth需要与width一起使用才会生效，否则会进行自适应宽度(使用rem布局时，需先计算出自适应后的宽度再传值)
使用了waterfall的父组件,如果样式存在问题，可去掉css scoped尝试一下
import waterfall from "vue-waterfall2" Vue.use(waterfall)
/* 注意: 1. gutterWidth需要与width一起使用才会生效，否则会进行自适应宽度(使用rem布局时，需先计算出自适应后的宽度再传值) 2. 使用了`waterfall`的父组件,如果样式存在问题，可去掉css `scoped`尝试一下 */ import Vue from "vue" export default{ data(){ return{ data:[], col:5, } }, computed:{ itemWidth(){ return (138*0.5*(document.documentElement.clientWidth/375)) #rem布局 计算宽度 }, gutterWidth(){ return (9*0.5*(document.documentElement.clientWidth/375)) #rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可) } }, methods:{ scroll(scrollData){ console.log(scrollData) }, switchCol(col){ this.col = col console.log(this.col) }, loadmore(index){ this.data = this.data.concat(this.data) } } }
| Name | Default | Type | Desc |
|---|---|---|---|
| col | 2 | Number | 列数 |
| width | null | Number | 宽度 |
| gutterWidth | 10 | Number | 间隔的宽度 |
| data | [] | Array | 数据 |
| isTransition | true | Boolean | 加载图片是否使用过渡动画 |
| lazyDistance | 500 | Number | 图片进行懒加载的距离 |
对于需要使用懒加载的图片，需要使用lazy-src属性
| Name | Data | Desc |
|---|---|---|
| loadmore | null | 滚动到底部触发 |
| scroll | obj | 获取滚动时的event对象 |
this.$waterfall.forceUpdate() //forceUpdate
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/108623.html
摘要：前言本文的前身是源自上的项目但由于该项目上次更新时间为年月日，很多内容早已过期或是很多近期优秀组件未被收录，所以小肆今天重新更新了内容并新建项目。提交的项目格式如下项目名称子标题相关介绍如果收录的项目有错误，可以通过反馈给小肆。 前言 本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日，很多内容早已过期或是很多近期优...
摘要：完整代码请戳我们回到小程序，此时接口返回的数据如下可以看到每个图片都有高度了，接下来我们实现瀑布流布局，等下，我们搞下瀑布流布局的懒加载，关于小程序的懒加载，猛戳了解更多。 效果图 来来来，看啊看，外面的世界多好看， showImg(https://segmentfault.com/img/remote/1460000014887454?w=371&h=580); 效果图展示的是瀑布流...
摘要：有三个参数将被渲染的元素是一个，在渲染子元素的合适时机例如的事件里，调用即可。从里面拿到一个元素，找出当前高度最小的一列，将放入该列。渲染，然后调用方法进入瀑布流还有个常见的功能就是滚动加载了，目前尚未加入此功能，会尽快加上。 很少写文章，很乱，，见谅。 我所见过的瀑布流都是固定的几列，然后每一列包含若干个元素（图文元素），每一列的总高度都差不多。所以我这个组件的功能就很简单，可以设...
阅读 1682·2021-11-23 09:51
阅读 745·2021-10-08 10:05
阅读 2807·2021-09-26 09:55
阅读 844·2021-09-22 15:21
阅读 1437·2021-09-09 09:33
阅读 945·2019-08-30 15:56
阅读 1104·2019-08-30 15:55
阅读 852·2019-08-30 13:19
