├── .babelrc ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── CHINESE-README.md ├── ENGLISH-README.md ├── LICENSE ├── README.md ├── index.html ├── lib ├── .npminstall.done ├── README.md ├── bus.js ├── index.js ├── package.json └── waterfall.vue ├── main ├── bus.js ├── index.js └── waterfall.vue ├── package.json ├── pnpm-lock.yaml ├── src ├── App.vue ├── assets │ ├── fork.png │ ├── gifhome.gif │ ├── gifhome_240x514_17s.gif │ ├── logo.png │ ├── star.png │ └── view.png ├── components │ ├── HelloWorld.vue │ ├── data.json │ ├── evaluateList.vue │ └── loading.vue ├── main.js └── router │ └── index.js ├── static └── .gitkeep ├── vite.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /CHINESE-README.md: -------------------------------------------------------------------------------- 1 | # 备注: vue-waterfall2@2.x 适用于 vue3, 如果你的应用是 vue2，请使用 vue-waterfall2@1.10.x, [1.10.x document](https://github.com/AwesomeDevin/vue-waterfall2/tree/1.10.6) 2 | 3 | ## vue-waterfall2 4 | * 1.不需知道元素宽高，可宽高自适应 5 | * 2.支持无图/视频/banner等,内容自定义程度高 6 | * 3.支持懒加载(lazy-src) 7 | * 4.提供Event:loadmore (pc/android端滑动到底部触发，ios端需要上拉触发) 8 | * 5.使用极为简便, 适用于PC/ios/android 9 | 10 | 有问题欢迎提issues、suggestions;Thank you for your Star ! 11 | [welcome to my blog(JS/前端工程化/Python/算法) ！！！](https://github.com/AwesomeDevin/blog) 12 | 13 | ![移动端效果](https://raw.githubusercontent.com/AwesomeDevin/vue-waterfall2/master/src/assets/gifhome_240x514_17s.gif) 14 | 15 | ## Demo 16 | [Common Demo](https://awesomedevin.github.io/vue-waterfall2/#/) 17 | [Lazyload Demo](https://awesomedevin.github.io/vue-waterfall2/#/lazy) 18 | [Vue2 Code Demo](https://codesandbox.io/embed/vue-template-99ps6) 19 | [Vue3 Code Demo](https://codesandbox.io/s/vue-waterfall2-local-demo-forked-d4hdcz?file=/src/components/waterfall.vue) 20 | 21 | 22 | 23 | [GITHUB](https://github.com/Rise-Devin/vue-waterfall2) 24 | ``` 25 | npm i 26 | npm run dev 27 | ``` 28 | 29 | ## Installation 30 | ``` 31 | npm i vue-waterfall2@latest --save 32 | ``` 33 | 34 | ## 属性 35 | Name | Default | Type | Desc | Necessary 36 | -------- | -------- | -------- | -------- | ------- 37 | height | - | String | 容器高度(height为空监听的是window的滚动事件，不为空则监听容器滚动，loadmore无法触发时，可尝试设置容器高度) | false 38 | col | 2 | Number | 列数 | false 39 | width | - | Number | 宽度 | false 40 | gutterWidth | 10 | Number | 间隔的宽度 | false 41 | data | [] | Array | 数据 | true 42 | isTransition | true | Boolean | 加载图片是否使用过渡动画 | false 43 | lazyDistance | 300 | Number | 触发图片懒加载的距离 | false 44 | loadDistance | 300 | Number | 触发上拉加载更多的距离 | false 45 | 46 | ## 懒加载 47 | 对于需要使用懒加载的图片，需要使用`lazy-src`属性 48 | ```html 49 | 50 | 加载错误 51 | 52 | ``` 53 | 54 | ## Events 55 | Name | Data | Desc 56 | -------- | --- | -------- 57 | loadmore | - | 滚动到底部触发 58 | scroll | info | 获取滚动时的event对象 59 | finish | - | 完成元素渲染 60 | 61 | ## $waterfall API 62 | ``` 63 | this.$waterfall.forceUpdate() //forceUpdate 64 | ``` 65 | 66 | ## Usage 67 | 注意: 68 | 1. 使用`rem`布局时，需先计算出自适应后的宽度再传值 69 | 2. 使用了`waterfall`的父组件,如果样式存在问题，可去掉css `scoped`尝试一下 70 | ##### main.js 71 | ```javascript 72 | import { createApp } from "vue"; 73 | import waterfall from 'vue-waterfall2' 74 | 75 | const app = createApp(App) 76 | app.use(waterfall) 77 | ``` 78 | ##### app.vue 79 | ```javascript 80 | 103 | 104 | 105 | /* 106 | 注意: 107 | 1. 使用`rem`布局时，需先计算出自适应后的宽度再传值 108 | 2. 使用了`waterfall`的父组件,如果样式存在问题，可去掉css `scoped`尝试一下 109 | */ 110 | 111 | import Vue from 'vue' 112 | export default{ 113 | data(){ 114 | return{ 115 | data:[], 116 | col:5, 117 | } 118 | }, 119 | computed:{ 120 | itemWidth(){ 121 | return (138*0.5*(document.documentElement.clientWidth/375)) #rem布局 计算宽度 122 | }, 123 | gutterWidth(){ 124 | return (9*0.5*(document.documentElement.clientWidth/375)) #rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可) 125 | } 126 | }, 127 | methods:{ 128 | scroll(scrollData){ 129 | console.log(scrollData) 130 | }, 131 | switchCol(col){ 132 | this.col = col 133 | console.log(this.col) 134 | }, 135 | loadmore(index){ 136 | this.data = this.data.concat(this.data) 137 | } 138 | } 139 | } 140 | ``` 141 | 142 | ## 如果你有任何研发问题，也可以加我好友，拉你入群进行技术交流 📖. 143 | 144 | 145 | -------------------------------------------------------------------------------- /ENGLISH-README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | #### [中文版文档](https://github.com/AwesomeDevin/vue-waterfall2/blob/master/CHINESE-README.md) 5 | 6 | # Note: vue-waterfall2@2.x is adapt for vue3, if your app is vue2, please use vue-waterfall2@1.10.x, [1.10.x document](https://github.com/AwesomeDevin/vue-waterfall2/tree/1.10.6) 7 | 8 | # vue-waterfall2 9 | 1. auto adaption for width and height 10 | 2. High degree of customization 11 | 3. Swipe to the bottom to trigger on pc/android, pull up to trigger on ios 12 | 4. Support lazy load(attribute with `lazy-src`) 13 | 5. Easy to use, for PC/ios/android 14 | 15 | ![The demo on mobile device](https://raw.githubusercontent.com/AwesomeDevin/vue-waterfall2/master/src/assets/gifhome_240x514_17s.gif) 16 | 17 | 18 | If you have some questions,welcome to describe issues、suggestions;Thank you for your Star ! 19 | [Welcome to my blog ！！！](https://github.com/AwesomeDevin/blog) 20 | 21 | 22 | ## Demo 23 | [Common Demo](https://awesomedevin.github.io/vue-waterfall2/#/) 24 | [Lazyload Demo](https://awesomedevin.github.io/vue-waterfall2/#/lazy) 25 | [Code Demo](https://codesandbox.io/embed/vue-template-99ps6) 26 | 27 | 28 | 29 | 30 | 31 | [GITHUB](https://github.com/Rise-Devin/vue-waterfall2) 32 | ``` 33 | npm i 34 | npm run dev 35 | ``` 36 | 37 | ## Installation 38 | ``` 39 | npm i vue-waterfall2@latest --save 40 | ``` 41 | 42 | ## Props 43 | Name | Default | Type | Desc 44 | -------- | -------- | -------- | -------- 45 | height | null | Number | height of container 46 | col | 2 | Number | The number of column 47 | width | null | Number | The width of each column 48 | gutterWidth | 10 | Number | The value of margin 49 | data | [] | Array | data 50 | isTransition | true | Boolean | load image with transition 51 | lazyDistance | 300 | Number | The distance of image lazy loading 52 | loadDistance | 300 | Number | The distance of loadmore 53 | 54 | ## Lazy Load 55 | For images that need to be loaded lazily, the 'lazy-src' attribute needs to be used 56 | ```html 57 | 58 | load error 59 | 60 | ``` 61 | 62 | ## Events 63 | Name | Data | Desc 64 | -------- | --- | -------- 65 | loadmore | - | Scroll to the bottom to trigger on PC / pull up to trigger on Mobile 66 | scroll | obj | Scroll to trigger and get the infomation of scroll 67 | finish | - | finish render 68 | 69 | ## $waterfall API 70 | ``` 71 | this.$waterfall.forceUpdate() //forceUpdate 72 | ``` 73 | 74 | ## Usage 75 | Notes: 76 | 1. when using `rem` to layout, calculate the width after adaptation before passing the value. 77 | 2. Use the parent component of 'waterfall' if there is a problem with the style, remove CSS `scoped` and try it 78 | ##### main.js 79 | ```javascript 80 | import { createApp } from "vue"; 81 | import waterfall from 'vue-waterfall2' 82 | 83 | const app = createApp(App) 84 | app.use(waterfall) 85 | ``` 86 | ##### app.vue 87 | ```javascript 88 | 110 | 111 | 112 | /* 113 | notes: 114 | 1. when using `rem` to layout, calculate the width after adaptation before passing the value. 115 | 2. Use the parent component of 'waterfall' if there is a problem with the style, remove CSS 'scoped' and try it 116 | */ 117 | 118 | import Vue from 'vue' 119 | export default{ 120 | data(){ 121 | return{ 122 | data:[], 123 | col:5, 124 | } 125 | }, 126 | computed:{ 127 | itemWidth(){ 128 | return (138*0.5*(document.documentElement.clientWidth/375)) #rem to layout, Calculate the value of width 129 | }, 130 | gutterWidth(){ 131 | return (9*0.5*(document.documentElement.clientWidth/375)) #rem to layout, Calculate the value of margin 132 | } 133 | }, 134 | methods:{ 135 | scroll(scrollData){ 136 | console.log(scrollData) 137 | }, 138 | switchCol(col){ 139 | this.col = col 140 | console.log(this.col) 141 | }, 142 | loadmore(index){ 143 | this.data = this.data.concat(this.data) 144 | } 145 | } 146 | } 147 | ``` 148 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 AwesomeDevin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | #### [中文版文档](https://github.com/AwesomeDevin/vue-waterfall2/blob/master/CHINESE-README.md) 5 | 6 | # Note: vue-waterfall2@2.x is adapt for vue3, if your app is vue2, please use vue-waterfall2@1.10.x, [1.10.x document](https://github.com/AwesomeDevin/vue-waterfall2/tree/1.10.6) 7 | 8 | # vue-waterfall2 9 | 1. auto adaption for width and height 10 | 2. High degree of customization 11 | 3. Swipe to the bottom to trigger on pc/android, pull up to trigger on ios 12 | 4. Support lazy load(attribute with `lazy-src`) 13 | 5. Easy to use, for PC/ios/android 14 | 15 | ![The demo on mobile device](https://raw.githubusercontent.com/AwesomeDevin/vue-waterfall2/master/src/assets/gifhome_240x514_17s.gif) 16 | 17 | 18 | If you have some questions,welcome to describe issues、suggestions;Thank you for your Star ! 19 | [Welcome to my blog ！！！](https://github.com/AwesomeDevin/blog) 20 | 21 | 22 | ## Demo 23 | [Common Demo](https://awesomedevin.github.io/vue-waterfall2/#/) 24 | [Lazyload Demo](https://awesomedevin.github.io/vue-waterfall2/#/lazy) 25 | [Vue2 Code Demo](https://codesandbox.io/embed/vue-template-99ps6) 26 | [Vue3 Code Demo](https://codesandbox.io/s/vue-waterfall2-local-demo-forked-d4hdcz?file=/src/components/waterfall.vue) 27 | 28 | 29 | 30 | 31 | 32 | [GITHUB](https://github.com/Rise-Devin/vue-waterfall2) 33 | ``` 34 | npm i 35 | npm run dev 36 | ``` 37 | 38 | ## Installation 39 | ``` 40 | npm i vue-waterfall2@latest --save 41 | ``` 42 | 43 | ## Props 44 | Name | Default | Type | Desc 45 | -------- | -------- | -------- | -------- 46 | height | null | Number | height of container 47 | col | 2 | Number | The number of column 48 | width | null | Number | The width of each column 49 | gutterWidth | 10 | Number | The value of margin 50 | data | [] | Array | data 51 | isTransition | true | Boolean | load image with transition 52 | lazyDistance | 300 | Number | The distance of image lazy loading 53 | loadDistance | 300 | Number | The distance of loadmore 54 | 55 | ## Lazy Load 56 | For images that need to be loaded lazily, the 'lazy-src' attribute needs to be used 57 | ```html 58 | 59 | load error 60 | 61 | ``` 62 | 63 | ## Events 64 | Name | Data | Desc 65 | -------- | --- | -------- 66 | loadmore | - | Scroll to the bottom to trigger on PC / pull up to trigger on Mobile 67 | scroll | obj | Scroll to trigger and get the infomation of scroll 68 | finish | - | finish render 69 | 70 | ## $waterfall API 71 | ``` 72 | this.$waterfall.forceUpdate() //forceUpdate 73 | ``` 74 | 75 | ## Usage 76 | Notes: 77 | 1. when using `rem` to layout, calculate the width after adaptation before passing the value. 78 | 2. Use the parent component of 'waterfall' if there is a problem with the style, remove CSS `scoped` and try it 79 | ##### main.js 80 | ```javascript 81 | import { createApp } from "vue"; 82 | import waterfall from 'vue-waterfall2' 83 | 84 | const app = createApp(App) 85 | app.use(waterfall) 86 | ``` 87 | ##### app.vue 88 | ```javascript 89 | 111 | 112 | 113 | /* 114 | notes: 115 | 1. when using `rem` to layout, calculate the width after adaptation before passing the value. 116 | 2. Use the parent component of 'waterfall' if there is a problem with the style, remove CSS 'scoped' and try it 117 | */ 118 | 119 | import Vue from 'vue' 120 | export default{ 121 | data(){ 122 | return{ 123 | data:[], 124 | col:5, 125 | } 126 | }, 127 | computed:{ 128 | itemWidth(){ 129 | return (138*0.5*(document.documentElement.clientWidth/375)) #rem to layout, Calculate the value of width 130 | }, 131 | gutterWidth(){ 132 | return (9*0.5*(document.documentElement.clientWidth/375)) #rem to layout, Calculate the value of margin 133 | } 134 | }, 135 | methods:{ 136 | scroll(scrollData){ 137 | console.log(scrollData) 138 | }, 139 | switchCol(col){ 140 | this.col = col 141 | console.log(this.col) 142 | }, 143 | loadmore(index){ 144 | this.data = this.data.concat(this.data) 145 | } 146 | } 147 | } 148 | ``` 149 | 150 | ## Stargazers 151 | [![Stargazers repo roster for @AwesomeDevin/vue-waterfall2](http://bytecrank.com/nastyox/reporoster/php/stargazersSVG.php?user=AwesomeDevin&repo=vue-waterfall2)](https://github.com/AwesomeDevin/vue-waterfall2/stargazers) 152 | 153 | 154 | 155 | ## Forkers 156 | [![Forkers repo roster for @AwesomeDevin/vue-waterfall2](http://bytecrank.com/nastyox/reporoster/php/forkersSVG.php?user=AwesomeDevin&repo=vue-waterfall2)](https://github.com/AwesomeDevin/vue-waterfall2/network/members) 157 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-waterfall2 7 | 8 | 9 |
10 | 11 | 12 | 13 | 22 | 23 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /lib/.npminstall.done: -------------------------------------------------------------------------------- 1 | Thu Jul 30 2020 11:23:13 GMT+0800 (GMT+08:00) -------------------------------------------------------------------------------- /lib/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | #### [中文版文档](https://github.com/AwesomeDevin/vue-waterfall2/blob/master/CHINESE-README.md) 5 | # vue-waterfall2 6 | 1. auto adaption for width and height 7 | 2. High degree of customization 8 | 3. support lazy load(attribute with `lazy-src`) 9 | 10 | ![The demo on mobile device](https://raw.githubusercontent.com/AwesomeDevin/vue-waterfall2/master/src/assets/gifhome_240x514_17s.gif) 11 | 12 | 13 | If you have some questions,welcome to describe issues、suggestions;Thank you for your Star ! 14 | [Welcome to my blog ！！！](https://github.com/AwesomeDevin/blog) 15 | 16 | 17 | ## Demo 18 | [Common Demo](http://47.105.188.15:3001/) 19 | [Lazyload Demo](http://47.105.188.15:3001/#/list) 20 | [Code Demo](https://codesandbox.io/embed/vue-template-99ps6) 21 | 22 | 23 | 24 | 25 | 26 | [GITHUB](https://github.com/Rise-Devin/vue-waterfall2) 27 | ``` 28 | npm i 29 | npm run dev 30 | ``` 31 | 32 | ## Installation 33 | ``` 34 | npm i vue-waterfall2@latest --save 35 | ``` 36 | 37 | ## Props 38 | Name | Default | Type | Desc 39 | -------- | -------- | -------- | -------- 40 | height | null | Number | height of container 41 | col | 2 | Number | The number of column 42 | width | null | Number | The width of each column 43 | gutterWidth | 10 | Number | The value of margin 44 | data | [] | Array | data 45 | isTransition | true | Boolean | load image with transition 46 | lazyDistance | 300 | Number | The distance of image lazy loading 47 | loadDistance | 300 | Number | The distance of loadmore 48 | 49 | ## Lazy Load 50 | For images that need to be loaded lazily, the 'lazy-src' attribute needs to be used 51 | ```html 52 | 53 | 56 | 57 | ``` 58 | 59 | ## Events 60 | Name | Data | Desc 61 | -------- | --- | -------- 62 | loadmore | - | Scroll to the bottom to trigger on PC / pull up to trigger on Mobile 63 | scroll | obj | Scroll to trigger and get the infomation of scroll 64 | finish | - | finish render 65 | 66 | ## $waterfall API 67 | ``` 68 | this.$waterfall.forceUpdate() //forceUpdate 69 | ``` 70 | 71 | ## Usage 72 | Notes: 73 | 1. attribute `gutterWidth` needs to be used together with `width` to be effective, otherwise it will be adaptive width (when using `rem` to layout, calculate the width after adaptation before passing the value). 74 | 2. Use the parent component of 'waterfall' if there is a problem with the style, remove CSS `scoped` and try it 75 | ##### main.js 76 | ```javascript 77 | import waterfall from 'vue-waterfall2' 78 | Vue.use(waterfall) 79 | ``` 80 | ##### app.vue 81 | ```javascript 82 | 106 | 107 | 108 | /* 109 | notes: 110 | 1. attribute `gutterWidth` needs to be used together with `width` to be effective, otherwise it will be adaptive width (when using `rem` to layout, calculate the width after adaptation before passing the value). 111 | 2. Use the parent component of 'waterfall' if there is a problem with the style, remove CSS 'scoped' and try it 112 | */ 113 | 114 | import Vue from 'vue' 115 | export default{ 116 | data(){ 117 | return{ 118 | data:[], 119 | col:5, 120 | } 121 | }, 122 | computed:{ 123 | itemWidth(){ 124 | return (138*0.5*(document.documentElement.clientWidth/375)) #rem to layout, Calculate the value of width 125 | }, 126 | gutterWidth(){ 127 | return (9*0.5*(document.documentElement.clientWidth/375)) #rem to layout, Calculate the value of margin 128 | } 129 | }, 130 | methods:{ 131 | scroll(scrollData){ 132 | console.log(scrollData) 133 | }, 134 | switchCol(col){ 135 | this.col = col 136 | console.log(this.col) 137 | }, 138 | loadmore(index){ 139 | this.data = this.data.concat(this.data) 140 | } 141 | } 142 | } 143 | ``` 144 | -------------------------------------------------------------------------------- /lib/bus.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _vue = require('vue'); 8 | 9 | var _vue2 = _interopRequireDefault(_vue); 10 | 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 12 | 13 | var Bus = new _vue2.default(); 14 | exports.default = Bus; -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _bus = require('./bus.js'); 8 | 9 | var _bus2 = _interopRequireDefault(_bus); 10 | 11 | var _waterfall = require('./waterfall.vue'); 12 | 13 | var _waterfall2 = _interopRequireDefault(_waterfall); 14 | 15 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 16 | 17 | var Index = { 18 | install: function install(Vue) { 19 | if (this.installed) { 20 | return; 21 | } 22 | this.installed = true; 23 | Vue.component('waterfall', _waterfall2.default); 24 | Vue.prototype.$waterfall = { 25 | forceUpdate: function forceUpdate() { 26 | _bus2.default.$emit('forceUpdate'); 27 | }, 28 | mix: function mix() { 29 | _bus2.default.$emit('mix'); 30 | } 31 | }; 32 | } 33 | }; 34 | exports.default = Index; -------------------------------------------------------------------------------- /lib/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "_args": [ 3 | [ 4 | "vue-waterfall2@1.10.1", 5 | "D:\\projects\\act\\proj\\2018\\1112_findv2" 6 | ] 7 | ], 8 | "_from": "vue-waterfall2@1.10.1", 9 | "_id": "vue-waterfall2@1.10.1", 10 | "_inBundle": false, 11 | "_integrity": "sha512-fMJq9LJwb6/0AciO7IqQNZb+fEkzpkyzOhugT+POndGAEGWpallLw6yDc0ZfKJ/AmStD+gPyvSLv8UY4KBnfEg==", 12 | "_location": "/vue-waterfall2", 13 | "_phantomChildren": {}, 14 | "_requested": { 15 | "type": "range", 16 | "registry": true, 17 | "raw": "vue-waterfall2@^1.10.1", 18 | "name": "vue-waterfall2", 19 | "escapedName": "vue-waterfall2", 20 | "rawSpec": "^1.10.1", 21 | "saveSpec": null, 22 | "fetchSpec": "^1.10.1" 23 | }, 24 | "_requiredBy": [ 25 | "#DEV:/" 26 | ], 27 | "_resolved": "http://registry.m.jd.com/vue-waterfall2/download/vue-waterfall2-1.10.1.tgz", 28 | "_shasum": "0793f2abead08383d15e072880017858cbdf3223", 29 | "_spec": "vue-waterfall2@^1.10.1", 30 | "_where": "E:\\projects\\work\\vue-waterfall", 31 | "author": { 32 | "name": "daivonup@gmail.com" 33 | }, 34 | "bugs": { 35 | "url": "https://github.com/Rise-Devin/vue-waterfall2/issues" 36 | }, 37 | "bundleDependencies": false, 38 | "dependencies": { 39 | "babel-runtime": "^6.26.0", 40 | "regenerator-runtime": "^0.13.1" 41 | }, 42 | "deprecated": false, 43 | "description": "vue plugin for waterfall", 44 | "devDependencies": { 45 | "babel-polyfill": "^6.26.0", 46 | "babel-preset-es2015": "^6.24.1", 47 | "vue": "^2.5.2" 48 | }, 49 | "homepage": "https://github.com/Rise-Devin/vue-waterfall2#readme", 50 | "keywords": [ 51 | "waterfall", 52 | "vue" 53 | ], 54 | "license": "MIT", 55 | "main": "index.js", 56 | "name": "vue-waterfall2", 57 | "repository": { 58 | "type": "git", 59 | "url": "git+https://github.com/Rise-Devin/vue-waterfall2.git" 60 | }, 61 | "scripts": { 62 | "test": "echo \"Error: no test specified\" && exit 1" 63 | }, 64 | "version": "1.10.1", 65 | "__npminstall_done": "Tue Nov 26 2019 10:44:40 GMT+0800 (GMT+08:00)" 66 | } -------------------------------------------------------------------------------- /lib/waterfall.vue: -------------------------------------------------------------------------------- 1 | 35 | 48 | 49 | -------------------------------------------------------------------------------- /main/bus.js: -------------------------------------------------------------------------------- 1 | class EventEmit{ 2 | constructor(){ 3 | this.events = {} 4 | } 5 | on(eventName, callback){ 6 | if(!this.events[eventName]){ 7 | this.events[eventName] = [] 8 | } 9 | this.events[eventName].push(callback) 10 | } 11 | emit(eventName, ...args){ 12 | if(this.events[eventName]){ 13 | this.events[eventName].forEach(cb => { 14 | cb(...args) 15 | }) 16 | } 17 | } 18 | off(eventName, callback){ 19 | if(this.events[eventName]){ 20 | this.events[eventName] = this.events[eventName].filter(cb => cb !== callback) 21 | } 22 | } 23 | } 24 | 25 | export default new EventEmit() -------------------------------------------------------------------------------- /main/index.js: -------------------------------------------------------------------------------- 1 | import bus from './bus'; 2 | import Waterfall from './waterfall.vue'; 3 | 4 | 5 | var Index = { 6 | install: function install(app) { 7 | if (this.installed) { 8 | return; 9 | } 10 | this.installed = true; 11 | app.component('waterfall', Waterfall); 12 | app.$waterfall = { 13 | forceUpdate: function forceUpdate() { 14 | bus.emit('forceUpdate'); 15 | }, 16 | mix: function mix() { 17 | bus.emit('mix'); 18 | } 19 | }; 20 | } 21 | }; 22 | 23 | export default Index -------------------------------------------------------------------------------- /main/waterfall.vue: -------------------------------------------------------------------------------- 1 | 35 | 42 | 43 | 427 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-waterfall2", 3 | "version": "2.0.0", 4 | "description": "waterfall adaptive plugin for vue and support lazy load , very easy! ", 5 | "author": "Devin ", 6 | "private": false, 7 | "scripts": { 8 | "dev": "vite", 9 | "start": "npm run dev", 10 | "build": "vite build" 11 | }, 12 | "files": [ 13 | "dist" 14 | ], 15 | "main": "dist/index.es.js", 16 | "module": "dist/index.es.js", 17 | "sideEffects": false, 18 | "license": "MIT", 19 | "peerDependencies": { 20 | "vue": "^3.3.4" 21 | }, 22 | "devDependencies": { 23 | "vue-waterfall2": "^2.0.0", 24 | "@vitejs/plugin-vue": "^4.1.0", 25 | "@vitejs/plugin-vue2": "^2.2.0", 26 | "autoprefixer": "^7.1.2", 27 | "axios": "^0.19.0", 28 | "babel-core": "^6.22.1", 29 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 30 | "babel-loader": "^7.1.1", 31 | "babel-plugin-syntax-jsx": "^6.18.0", 32 | "babel-plugin-transform-runtime": "^6.22.0", 33 | "babel-plugin-transform-vue-jsx": "^3.5.0", 34 | "babel-preset-env": "^1.3.2", 35 | "babel-preset-stage-2": "^6.22.0", 36 | "chalk": "^2.0.1", 37 | "copy-webpack-plugin": "^4.0.1", 38 | "css-loader": "^0.28.11", 39 | "extract-text-webpack-plugin": "^3.0.0", 40 | "file-loader": "^1.1.4", 41 | "friendly-errors-webpack-plugin": "^1.6.1", 42 | "html-webpack-plugin": "^2.30.1", 43 | "less": "^4.1.3", 44 | "less-loader": "^5.0.0", 45 | "node-notifier": "^5.1.2", 46 | "optimize-css-assets-webpack-plugin": "^3.2.0", 47 | "ora": "^1.2.0", 48 | "portfinder": "^1.0.13", 49 | "postcss-import": "^11.0.0", 50 | "postcss-less": "^6.0.0", 51 | "postcss-loader": "^2.0.8", 52 | "postcss-url": "^7.2.1", 53 | "rimraf": "^2.6.0", 54 | "semver": "^5.3.0", 55 | "shelljs": "^0.7.6", 56 | "uglifyjs-webpack-plugin": "^1.1.1", 57 | "url-loader": "^0.5.8", 58 | "vite": "^4.5.0", 59 | "vite-plugin-css-injected-by-js": "^3.3.0", 60 | "vite-plugin-dts": "^3.6.3", 61 | "vue-loader": "^13.3.0", 62 | "vue-router": "^4.2.5", 63 | "vue-style-loader": "^3.1.2", 64 | "vue-template-compiler": "^2.7.0", 65 | "webpack": "^3.6.0", 66 | "webpack-bundle-analyzer": "^2.9.0", 67 | "webpack-dev-server": "^2.9.1", 68 | "webpack-merge": "^4.1.0" 69 | }, 70 | "engines": { 71 | "node": ">= 6.0.0", 72 | "npm": ">= 3.0.0" 73 | }, 74 | "keywords": [ 75 | "vue", 76 | "vue3", 77 | "vue3-waterfall", 78 | "vue-waterfall", 79 | "vue-waterfall2", 80 | "waterfall" 81 | ], 82 | "browserslist": [ 83 | "> 1%", 84 | "last 2 versions", 85 | "not ie <= 8" 86 | ] 87 | } -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 36 | -------------------------------------------------------------------------------- /src/assets/fork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AwesomeDevin/vue-waterfall2/e37b1a2a680adc4cf370c3474cc273843276cadb/src/assets/fork.png -------------------------------------------------------------------------------- /src/assets/gifhome.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AwesomeDevin/vue-waterfall2/e37b1a2a680adc4cf370c3474cc273843276cadb/src/assets/gifhome.gif -------------------------------------------------------------------------------- /src/assets/gifhome_240x514_17s.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AwesomeDevin/vue-waterfall2/e37b1a2a680adc4cf370c3474cc273843276cadb/src/assets/gifhome_240x514_17s.gif -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AwesomeDevin/vue-waterfall2/e37b1a2a680adc4cf370c3474cc273843276cadb/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AwesomeDevin/vue-waterfall2/e37b1a2a680adc4cf370c3474cc273843276cadb/src/assets/star.png -------------------------------------------------------------------------------- /src/assets/view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AwesomeDevin/vue-waterfall2/e37b1a2a680adc4cf370c3474cc273843276cadb/src/assets/view.png -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 115 | 184 | 185 | -------------------------------------------------------------------------------- /src/components/data.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "img": "https://image.watsons.com.cn//upload/8a316140.png?w=377&h=451&x-oss-process=image/resize,w_1080", 3 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 4 | "title": "最近浴室新宠，日系神仙好物了解一下～", 5 | "user": "迷人的小妖精迷人的小妖精", 6 | "like": "953" 7 | }, { 8 | "img": "https://image.watsons.com.cn//upload/5c3e51e4.jpg?w=720&h=960&x-oss-process=image/resize,w_1080", 9 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 10 | "title": "真的是万能.超级实用.包包必备单品! ! !", 11 | "user": "迷人的小妖精迷人的小妖精", 12 | "like": "952" 13 | }, { 14 | "img": "https://image.watsons.com.cn//upload/bef41e67.JPG?w=712&h=534&x-oss-process=image/resize,w_1080", 15 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 16 | "title": "150元搞定全套护肤品，这些护肤好物必须交出来！", 17 | "user": "迷人的小妖精迷人的小妖精", 18 | "like": "953" 19 | }, { 20 | "img": "https://image.watsons.com.cn//upload/13afe9a7.jpg?x-oss-process=image/resize,w_1080", 21 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 22 | "title": "夏天用这款姨妈巾，让你体验真正的清爽", 23 | "user": "迷人的小妖精迷人的小妖精", 24 | "like": "953" 25 | }, { 26 | "img": "https://image.watsons.com.cn//upload/642cb83c.jpeg?w=1080&h=1080&x-oss-process=image/resize,w_1080", 27 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 28 | "title": "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试", 29 | "user": "迷人的小妖精迷人的小妖精", 30 | "like": "953" 31 | }, { 32 | "img": "https://image.watsons.com.cn//upload/98c7c4c3.jpg?w=1210&h=1210&x-oss-process=image/resize,w_1080", 33 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 34 | "title": "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试", 35 | "user": "迷人的小妖精迷人的小妖精", 36 | "like": "953" 37 | }, { 38 | "img": "https://image.watsons.com.cn//upload/25ab20fe.JPG?w=1000&h=1200&x-oss-process=image/resize,w_1080", 39 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 40 | "title": "夏天用这款姨妈巾，让你体验真正的清爽", 41 | "user": "迷人的小妖精迷人的小妖精", 42 | "like": "953" 43 | }, { 44 | "img": "https://image.watsons.com.cn//upload/083767f0.JPG?w=828&h=620&x-oss-process=image/resize,w_1080", 45 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 46 | "title": "150元搞定全套护肤品，这些护肤好物必须交出来！", 47 | "user": "迷人的小妖精迷人的小妖精", 48 | "like": "953" 49 | }, { 50 | "img": "https://image.watsons.com.cn//upload/92761043.JPG?w=1000&h=999&x-oss-process=image/resize,w_1080", 51 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 52 | "title": "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试", 53 | "user": "迷人的小妖精迷人的小妖精", 54 | "like": "953" 55 | }, { 56 | "img": "https://image.watsons.com.cn//upload/31e42833.jpg?w=750&h=750&x-oss-process=image/resize,w_1080", 57 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 58 | "title": "我想喝你的洗澡水！", 59 | "user": "MFF", 60 | "like": "953" 61 | }, { 62 | "img": "https://image.watsons.com.cn//upload/02a4f38d.jpg?w=1067&h=1067&x-oss-process=image/resize,w_1080", 63 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 64 | "title": "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试", 65 | "user": "迷人的小妖精迷人的小妖精", 66 | "like": "953" 67 | }, { 68 | "img": "https://ci.xiaohongshu.com/9d5d58d0-7f91-5792-b8e3-25b13b5c1807?imageView2/2/w/400/q/50/format/jpg", 69 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 70 | "title": "夏天用这款姨妈巾，让你体验真正的清爽", 71 | "user": "迷人的小妖精迷人的小妖精", 72 | "like": "953" 73 | }, { 74 | "img": "https://image.watsons.com.cn//upload/92761043.JPG?w=1000&h=999&x-oss-process=image/resize,w_1080", 75 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 76 | "title": "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试", 77 | "user": "迷人的小妖精迷人的小妖精", 78 | "like": "953" 79 | }, { 80 | "img": "https://ci.xiaohongshu.com/7e4df2f1-a364-59e7-b7a8-b165abbecd69?imageView2/2/w/400/q/50/format/jpg", 81 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 82 | "title": "150元搞定全套护肤品，这些护肤好物必须交出来！", 83 | "user": "迷人的小妖精迷人的小妖精", 84 | "like": "953" 85 | }, { 86 | "img": "https://image.watsons.com.cn//upload/da61c0f5.jpg?w=959&h=958&x-oss-process=image/resize,w_1080", 87 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 88 | "title": "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试", 89 | "user": "迷人的小妖精迷人的小妖精123", 90 | "like": "953" 91 | }, { 92 | "img": "https://ci.xiaohongshu.com/eb971d00-05ab-5b2a-ba03-52d8f544c42b?imageView2/2/w/400/q/50/format/jpg", 93 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 94 | "title": "夏天用这款姨妈巾，让你体验真正的清爽", 95 | "user": "迷人的小妖精迷人的小妖精", 96 | "like": "953" 97 | }, { 98 | "img": "https://ci.xiaohongshu.com/9d5d58d0-7f91-5792-b8e3-25b13b5c1807?imageView2/2/w/400/q/50/format/jpg", 99 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 100 | "title": "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试", 101 | "user": "迷人的小妖精迷人的小妖精", 102 | "like": "953" 103 | }, { 104 | "img": "https://image.watsons.com.cn//upload/589585c1.jpeg?x-oss-process=image/resize,w_1080", 105 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 106 | "title": "150元搞定全套护肤品，这些护肤好物必须交出来！", 107 | "user": "迷人的小妖精迷人的小妖精", 108 | "like": "953" 109 | }, { 110 | "img": "https://image.watsons.com.cn//upload/60cc9b8e.jpg?w=991&h=744&x-oss-process=image/resize,w_1080", 111 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 112 | "title": "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试", 113 | "user": "迷人的小妖精迷人的小妖精", 114 | "like": "953" 115 | }, { 116 | "img": "https://image.watsons.com.cn//upload/4a3c1788.jpg?w=823&h=1000&x-oss-process=image/resize,w_1080", 117 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 118 | "title": "夏天用这款姨妈巾，让你体验真正的清爽", 119 | "user": "MFF", 120 | "like": "953" 121 | }, { 122 | "img": "https://ci.xiaohongshu.com/7e4df2f1-a364-59e7-b7a8-b165abbecd69?imageView2/2/w/400/q/50/format/jpg", 123 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 124 | "title": "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试", 125 | "user": "迷人的小妖精迷人的小妖精", 126 | "like": "953" 127 | }, { 128 | "img": "https://image.watsons.com.cn//upload/d862d932.jpg?w=1080&h=1440&x-oss-process=image/resize,w_1080", 129 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 130 | "title": "真的是万能.超级实用.包包必备单品! ! !", 131 | "user": "迷人的小妖精迷人的小妖精123", 132 | "like": "953" 133 | }, { 134 | "img": "https://image.watsons.com.cn//upload/0a89e6b7.jpg?w=1080&h=1920&x-oss-process=image/resize,w_1080", 135 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 136 | "title": "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试", 137 | "user": "迷人的小妖精迷人的小妖精", 138 | "like": "953" 139 | }, { 140 | "img": "https://ci.xiaohongshu.com/97247d43-f7ab-5755-a6a6-c5e6c293442f?imageView2/2/w/400/q/50/format/jpg", 141 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 142 | "title": "夏天用这款姨妈巾，让你体验真正的清爽", 143 | "user": "MFF", 144 | "like": "953" 145 | }, { 146 | "img": "https://image.watsons.com.cn//upload/b709ed72.jpg?w=552&h=414&x-oss-process=image/resize,w_1080", 147 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 148 | "title": "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试", 149 | "user": "迷人的小妖精迷人的小妖精", 150 | "like": "953" 151 | }, { 152 | "img": "https://ci.xiaohongshu.com/19216d62-09cd-5d00-8116-0d60c9fb9102?imageView2/2/w/400/q/50/format/jpg", 153 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 154 | "title": "夏天用这款姨妈巾，让你体验真正的清爽", 155 | "user": "迷人的小妖精迷人的小妖精123", 156 | "like": "953" 157 | }, { 158 | "img": "https://image.watsons.com.cn//upload/eb4fb58f.jpg?w=1080&h=1080&x-oss-process=image/resize,w_1080", 159 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 160 | "title": "150元搞定全套护肤品，这些护肤好物必须交出来！", 161 | "user": "迷人的小妖精迷人的小妖精", 162 | "like": "953" 163 | }, { 164 | "img": "https://ci.xiaohongshu.com/97247d43-f7ab-5755-a6a6-c5e6c293442f?imageView2/2/w/400/q/50/format/jpg", 165 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 166 | "title": "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试", 167 | "user": "迷人的小妖精迷人的小妖精", 168 | "like": "953" 169 | }, { 170 | "img": "https://image.watsons.com.cn//upload/99253111.jpg?w=1080&h=1920&x-oss-process=image/resize,w_1080", 171 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 172 | "title": "150元搞定全套护肤品，这些护肤好物必须交出来！", 173 | "user": "迷人的小妖精迷人的小妖精", 174 | "like": "953" 175 | }, { 176 | "img": "https://ci.xiaohongshu.com/19216d62-09cd-5d00-8116-0d60c9fb9102?imageView2/2/w/400/q/50/format/jpg", 177 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 178 | "title": "最近浴室新宠，日系神仙好物了解一下～", 179 | "user": "迷人的小妖精迷人的小妖精123", 180 | "like": "953" 181 | }, { 182 | "img": "https://image.watsons.com.cn//upload/fcd68df4.jpg?w=1080&h=1080&x-oss-process=image/resize,w_1080", 183 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 184 | "title": "夏天用这款姨妈巾，让你体验真正的清爽", 185 | "user": "迷人的小妖精迷人的小妖精", 186 | "like": "953" 187 | }, { 188 | "img": "https://image.watsons.com.cn//upload/99253111.jpg?w=1080&h=1920&x-oss-process=image/resize,w_1080", 189 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 190 | "title": "夏天用这款姨妈巾，让你体验真正的清爽", 191 | "user": "迷人的小妖精迷人的小妖精", 192 | "like": "953" 193 | }, { 194 | "img": "https://ci.xiaohongshu.com/97247d43-f7ab-5755-a6a6-c5e6c293442f?imageView2/2/w/400/q/50/format/jpg", 195 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 196 | "title": "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试", 197 | "user": "迷人的小妖精迷人的小妖精", 198 | "like": "953" 199 | }, { 200 | "img": "https://image.watsons.com.cn//upload/dce45845.png?w=1080&h=1438&x-oss-process=image/resize,w_1080", 201 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 202 | "title": "真的是万能.超级实用.包包必备单品! ! !", 203 | "user": "迷人的小妖精迷人的小妖精", 204 | "like": "953" 205 | }, { 206 | "img": "https://ci.xiaohongshu.com/19216d62-09cd-5d00-8116-0d60c9fb9102?imageView2/2/w/400/q/50/format/jpg", 207 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 208 | "title": "夏天用这款姨妈巾，让你体验真正的清爽", 209 | "user": "MFF", 210 | "like": "953" 211 | }, { 212 | "img": "https://image.watsons.com.cn//upload/589585c1.jpeg?x-oss-process=image/resize,w_1080", 213 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 214 | "title": "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试", 215 | "user": "迷人的小妖精迷人的小妖精", 216 | "like": "953" 217 | }, { 218 | "img": "https://image.watsons.com.cn//upload/415f984f.jpeg?w=828&h=1104&x-oss-process=image/resize,w_1080", 219 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 220 | "title": "最近浴室新宠，日系神仙好物了解一下～", 221 | "user": "迷人的小妖精迷人的小妖精123", 222 | "like": "953" 223 | }, { 224 | "img": "https://ci.xiaohongshu.com/9d5d58d0-7f91-5792-b8e3-25b13b5c1807?imageView2/2/w/400/q/50/format/jpg", 225 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 226 | "title": "真的是万能.超级实用.包包必备单品! ! !", 227 | "user": "迷人的小妖精迷人的小妖精", 228 | "like": "953" 229 | }, { 230 | "img": "https://image.watsons.com.cn//upload/137b50b0.jpg?x-oss-process=image/resize,w_1080", 231 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 232 | "title": "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试", 233 | "user": "迷人的小妖精迷人的小妖精", 234 | "like": "953" 235 | }, { 236 | "img": "https://image.watsons.com.cn//upload/54c5d7b4.jpg?w=828&h=991&x-oss-process=image/resize,w_1080", 237 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 238 | "title": "150元搞定全套护肤品，这些护肤好物必须交出来！", 239 | "user": "MFF", 240 | "like": "953" 241 | }, { 242 | "img": "https://ci.xiaohongshu.com/19216d62-09cd-5d00-8116-0d60c9fb9102?imageView2/2/w/400/q/50/format/jpg", 243 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 244 | "title": "夏天用这款姨妈巾，让你体验真正的清爽", 245 | "user": "迷人的小妖精迷人的小妖精123", 246 | "like": "953" 247 | }, { 248 | "img": "https://ci.xiaohongshu.com/9d5d58d0-7f91-5792-b8e3-25b13b5c1807?imageView2/2/w/400/q/50/format/jpg", 249 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 250 | "title": "最近浴室新宠，日系神仙好物了解一下～", 251 | "user": "迷人的小妖精迷人的小妖精", 252 | "like": "953" 253 | }, { 254 | "img": "https://ci.xiaohongshu.com/97247d43-f7ab-5755-a6a6-c5e6c293442f?imageView2/2/w/400/q/50/format/jpg", 255 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 256 | "title": "真的是万能.超级实用.包包必备单品! ! !", 257 | "user": "迷人的小妖精迷人的小妖精", 258 | "like": "953" 259 | }, { 260 | "img": "https://image.watsons.com.cn//upload/71d19462.jpg?x-oss-process=image/resize,w_1080", 261 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 262 | "title": "夏天用这款姨妈巾，让你体验真正的清爽", 263 | "user": "MFF", 264 | "like": "953" 265 | }, { 266 | "img": "https://ci.xiaohongshu.com/19216d62-09cd-5d00-8116-0d60c9fb9102?imageView2/2/w/400/q/50/format/jpg", 267 | "avatar": "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg", 268 | "title": "150元搞定全套护肤品，这些护肤好物必须交出来！", 269 | "user": "迷人的小妖精迷人的小妖精123", 270 | "like": "953" 271 | }] -------------------------------------------------------------------------------- /src/components/evaluateList.vue: -------------------------------------------------------------------------------- 1 | 129 | 189 | 190 | -------------------------------------------------------------------------------- /src/components/loading.vue: -------------------------------------------------------------------------------- 1 | 94 | 95 | 96 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import { createApp } from "vue"; 4 | import App from "./App.vue"; 5 | import router from "./router"; 6 | 7 | // import waterfall from "vue-waterfall2"; 8 | import waterfall from "../main"; 9 | // use(waterfall); 10 | 11 | const app = createApp(App) 12 | app.use(router) 13 | app.use(waterfall) 14 | 15 | app.mount('#app') 16 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHashHistory } from "vue-router"; 2 | import HelloWorld from "@/components/HelloWorld.vue"; 3 | import Lazy from "@/components/evaluateList.vue"; 4 | 5 | 6 | export default createRouter({ 7 | history: createWebHashHistory(), 8 | routes: [ 9 | { 10 | path: "/", 11 | name: "HelloWorld", 12 | component: HelloWorld 13 | }, 14 | { 15 | path: "/lazy", 16 | name: "lazy", 17 | component: Lazy 18 | } 19 | ] 20 | }); 21 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AwesomeDevin/vue-waterfall2/e37b1a2a680adc4cf370c3474cc273843276cadb/static/.gitkeep -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path'; 2 | import { defineConfig, loadEnv } from 'vite'; 3 | import vue from '@vitejs/plugin-vue' 4 | import packageJSON from './package.json' 5 | import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js' 6 | 7 | export default ({ mode }) => { 8 | const { VITE_PORT, VITE_BASE_URL } = loadEnv(mode, process.cwd()); 9 | 10 | return defineConfig({ 11 | base: VITE_BASE_URL, 12 | plugins: [ vue(), cssInjectedByJsPlugin()], 13 | resolve: { 14 | alias: { 15 | '@': resolve(__dirname, 'src'), 16 | }, 17 | }, 18 | 19 | css: { 20 | preprocessorOptions: { 21 | less: { 22 | modifyVars: { 23 | // hack: `true; @import (reference) "${resolve('src/style/variables.less')}";`, 24 | }, 25 | math: 'strict', 26 | javascriptEnabled: true, 27 | }, 28 | }, 29 | }, 30 | server: { 31 | // 是否开启 https 32 | https: false, 33 | // 端口号 34 | port: VITE_PORT, 35 | // 监听所有地址 36 | host: '0.0.0.0', 37 | // 服务启动时是否自动打开浏览器 38 | open: true, 39 | // 允许跨域 40 | cors: true, 41 | // 自定义代理规则 42 | proxy: {}, 43 | }, 44 | build: { 45 | minify: true, 46 | outDir: 'dist', 47 | lib: { 48 | entry: [__dirname + '/main/index.js'], 49 | name: packageJSON.name, 50 | formats: ['es'], 51 | fileName: (format, entryName) => { 52 | return `${entryName}.${format}.js` 53 | }, 54 | }, 55 | rollupOptions: { 56 | external: ['vue'], 57 | }, 58 | }, 59 | }); 60 | }; --------------------------------------------------------------------------------