├── .gitignore
├── .idea
    ├── .gitignore
    ├── codeStyles
    │   ├── codeStyleConfig.xml
    │   └── Project.xml
    ├── misc.xml
    ├── vcs.xml
    ├── inspectionProfiles
    │   └── Project_Default.xml
    ├── modules.xml
    ├── vue-waterfall.iml
    └── watcherTasks.xml
├── postcss.config.js
├── .DS_Store
├── src
    ├── dom
    │   ├── App.vue
    │   ├── index.html
    │   ├── Details.vue
    │   ├── index.js
    │   └── Home.vue
    ├── .DS_Store
    └── vue-waterfall
    │   ├── index.js
    │   ├── waterfall-silde.vue
    │   └── waterfall.vue
├── .eslintignore
├── .prettierrc
├── babel.config.js
├── dist
    └── index.html
├── .eslintrc.js
├── package.json
├── README.md
└── lib
    └── vue-waterfall-adaptive.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .idea
3 | 


--------------------------------------------------------------------------------
/.idea/.gitignore:
--------------------------------------------------------------------------------
1 | # Default ignored files
2 | /workspace.xml


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   autoprefixer: true
3 | }


--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/geng452654716/vue-waterfall/HEAD/.DS_Store


--------------------------------------------------------------------------------
/src/dom/App.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <router-view></router-view>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist/
3 | test
4 | build/
5 | .idea
6 | public/
7 | lib/
8 | 


--------------------------------------------------------------------------------
/src/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/geng452654716/vue-waterfall/HEAD/src/.DS_Store


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "eslintIntegration": true,
3 |   "singleQuote": true,
4 |   "semi": false
5 | }
6 | 


--------------------------------------------------------------------------------
/.idea/codeStyles/codeStyleConfig.xml:
--------------------------------------------------------------------------------
1 | <component name="ProjectCodeStyleConfiguration">
2 |   <state>
3 |     <option name="USE_PER_PROJECT_SETTINGS" value="true" />
4 |   </state>
5 | </component>


--------------------------------------------------------------------------------
/.idea/misc.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="JavaScriptSettings">
4 |     <option name="languageLevel" value="ES6" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   plugins: [
 3 |     'lodash',
 4 |     [
 5 |       '@babel/plugin-transform-runtime',
 6 |       {
 7 |         corejs: 2,
 8 |         helpers: true,
 9 |         regenerator: true,
10 |         useESModules: false
11 |       }
12 |     ]
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/.idea/inspectionProfiles/Project_Default.xml:
--------------------------------------------------------------------------------
1 | <component name="InspectionProjectProfileManager">
2 |   <profile version="1.0">
3 |     <option name="myName" value="Project Default" />
4 |     <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
5 |   </profile>
6 | </component>


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/vue-waterfall.iml" filepath="$PROJECT_DIR$/.idea/vue-waterfall.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/src/dom/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>vue-waterfall</title>
 8 | </head>
 9 | <body>
10 |   <div id="app"></div>
11 | </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/dom/Details.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="details">
 3 |     这里是详情页
 4 |     <img :src="imgName" alt="" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   computed: {
11 |     imgName() {
12 |       return this.$route.query.img
13 |     }
14 |   }
15 | }
16 | </script>
17 | 
18 | <style lang="less" scoped>
19 | .details {
20 |   height: 5000px;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>vue-waterfall</title>
 8 | </head>
 9 | <body>
10 |   <div id="app"></div>
11 | <script type="text/javascript" src="vue-waterfall.js"></script></body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/vue-waterfall/index.js:
--------------------------------------------------------------------------------
 1 | import waterfallSilde from './waterfall-silde.vue'
 2 | import waterfall from './waterfall.vue'
 3 | const install = function(Vue) {
 4 |   Vue.component(waterfall.name, waterfall)
 5 |   Vue.component(waterfallSilde.name, waterfallSilde)
 6 | }
 7 | const VueWaterfall = { waterfallSilde, waterfall, install }
 8 | export default VueWaterfall
 9 | export { waterfallSilde, waterfall, install }
10 | 


--------------------------------------------------------------------------------
/.idea/vue-waterfall.iml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <module type="WEB_MODULE" version="4">
 3 |   <component name="NewModuleRootManager">
 4 |     <content url="file://$MODULE_DIR$">
 5 |       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
 6 |       <excludeFolder url="file://$MODULE_DIR$/temp" />
 7 |       <excludeFolder url="file://$MODULE_DIR$/tmp" />
 8 |     </content>
 9 |     <orderEntry type="inheritedJdk" />
10 |     <orderEntry type="sourceFolder" forTests="false" />
11 |   </component>
12 | </module>


--------------------------------------------------------------------------------
/src/dom/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import VueRouter from 'vue-router'
 4 | import Home from './Home.vue'
 5 | import Details from './Details.vue'
 6 | Vue.use(VueRouter)
 7 | 
 8 | const router = new VueRouter({
 9 |   routes: [
10 |     {
11 |       path: '/',
12 |       name: 'Home',
13 |       component: Home
14 |     },
15 |     {
16 |       path: '/details',
17 |       name: 'Details',
18 |       component: Details
19 |     }
20 |   ]
21 | })
22 | new Vue({
23 |   router,
24 |   render: h => h(App)
25 | }).$mount('#app')
26 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   parserOptions: {
 7 |     parser: 'babel-eslint'
 8 |   },
 9 |   extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
10 |   rules: {
11 |     'prettier/prettier': 'error',
12 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
13 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
14 |     //强制使用单引号
15 |     quotes: ['error', 'single'],
16 |     //强制不使用分号结尾
17 |     semi: ['error', 'never']
18 |   },
19 |   globals: {
20 |     noCaptcha: 'readonly'
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/.idea/watcherTasks.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <project version="4">
 3 |   <component name="ProjectTasksOptions">
 4 |     <TaskOptions isEnabled="true">
 5 |       <option name="arguments" value="--write $FilePathRelativeToProjectRoot$" />
 6 |       <option name="checkSyntaxErrors" value="true" />
 7 |       <option name="description" />
 8 |       <option name="exitCodeBehavior" value="ERROR" />
 9 |       <option name="fileExtension" value="js" />
10 |       <option name="immediateSync" value="false" />
11 |       <option name="name" value="Prettier" />
12 |       <option name="output" value="$FilePathRelativeToProjectRoot$" />
13 |       <option name="outputFilters">
14 |         <array />
15 |       </option>
16 |       <option name="outputFromStdout" value="false" />
17 |       <option name="program" value="$ProjectFileDir$/node_modules/.bin/prettier" />
18 |       <option name="runOnExternalChanges" value="true" />
19 |       <option name="scopeName" value="项目文件" />
20 |       <option name="trackOnlyRoot" value="false" />
21 |       <option name="workingDir" value="$ProjectFileDir$" />
22 |       <envs />
23 |     </TaskOptions>
24 |     <TaskOptions isEnabled="true">
25 |       <option name="arguments" value="--write $FilePathRelativeToProjectRoot$" />
26 |       <option name="checkSyntaxErrors" value="true" />
27 |       <option name="description" />
28 |       <option name="exitCodeBehavior" value="ERROR" />
29 |       <option name="fileExtension" value="vue" />
30 |       <option name="immediateSync" value="false" />
31 |       <option name="name" value="Prettier" />
32 |       <option name="output" value="$FilePathRelativeToProjectRoot$" />
33 |       <option name="outputFilters">
34 |         <array />
35 |       </option>
36 |       <option name="outputFromStdout" value="false" />
37 |       <option name="program" value="$ProjectFileDir$/node_modules/.bin/prettier" />
38 |       <option name="runOnExternalChanges" value="true" />
39 |       <option name="scopeName" value="项目文件" />
40 |       <option name="trackOnlyRoot" value="false" />
41 |       <option name="workingDir" value="$ProjectFileDir$" />
42 |       <envs />
43 |     </TaskOptions>
44 |   </component>
45 | </project>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-waterfall-adaptive",
 3 |   "version": "1.1.6",
 4 |   "description": "基于 vue.js 的瀑布流组件，自适应高度，响应式",
 5 |   "main": "lib/vue-waterfall.js",
 6 |   "files": [
 7 |     "lib",
 8 |     "src/vue-waterfall"
 9 |   ],
10 |   "scripts": {
11 |     "serve": "webpack-dev-server --config ./build/webpack.dev.js",
12 |     "build": "webpack --config ./build/webpack.prod.js",
13 |     "build:dev": "webpack --config ./build/webpack.dev.js",
14 |     "lint": "eslint --fix ./src"
15 |   },
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "git+https://github.com/geng452654716/vue-waterfall.git"
19 |   },
20 |   "keywords": [
21 |     "waterfall",
22 |     "vue",
23 |     "adaptive",
24 |     "layout"
25 |   ],
26 |   "author": "YaoChangTueQueDuan",
27 |   "license": "MIT",
28 |   "bugs": {
29 |     "url": "https://github.com/geng452654716/vue-waterfall/issues"
30 |   },
31 |   "homepage": "https://github.com/geng452654716/vue-waterfall.git",
32 |   "devDependencies": {
33 |     "@babel/core": "^7.4.0",
34 |     "@babel/plugin-transform-runtime": "^7.4.0",
35 |     "@babel/runtime": "^7.4.2",
36 |     "@babel/runtime-corejs2": "^7.4.2",
37 |     "@vue/eslint-config-prettier": "^6.0.0",
38 |     "@vue/eslint-plugin": "^4.2.0",
39 |     "babel-eslint": "^10.0.1",
40 |     "babel-loader": "^8.0.5",
41 |     "babel-plugin-lodash": "^3.3.4",
42 |     "clean-webpack-plugin": "^2.0.1",
43 |     "css-loader": "^2.1.1",
44 |     "eslint": "^5.16.0",
45 |     "eslint-plugin-prettier": "^3.1.4",
46 |     "eslint-plugin-vue": "^5.2.3",
47 |     "file-loader": "^3.0.1",
48 |     "html-webpack-plugin": "^3.2.0",
49 |     "less": "^3.9.0",
50 |     "less-loader": "^4.1.0",
51 |     "lint-staged": "^10.2.10",
52 |     "lodash-webpack-plugin": "^0.11.5",
53 |     "postcss-loader": "^3.0.0",
54 |     "url-loader": "^1.1.2",
55 |     "vue-loader": "^15.7.0",
56 |     "vue-template-compiler": "^2.6.10",
57 |     "webpack": "^4.29.6",
58 |     "webpack-cli": "^3.3.0",
59 |     "webpack-dev-server": "^3.2.1",
60 |     "webpack-merge": "^4.2.1"
61 |   },
62 |   "dependencies": {
63 |     "@vue/eslint-config-standard": "^4.0.0",
64 |     "lodash": "^4.17.11",
65 |     "vue": "^2.6.10",
66 |     "vue-router": "^3.3.4"
67 |   },
68 |   "gitHooks": {
69 |     "pre-commit": "lint-staged"
70 |   },
71 |   "lint-staged": {
72 |     "*.{js,jsx,vue}": [
73 |       "eslint --fix ./src",
74 |       "git add"
75 |     ]
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/src/vue-waterfall/waterfall-silde.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="waterfall-silde"
  4 |     :style="_style"
  5 |     ref="waterfallSilde"
  6 |     :class="{ show: init }"
  7 |   >
  8 |     <slot></slot>
  9 |   </div>
 10 | </template>
 11 | 
 12 | <script>
 13 | export default {
 14 |   name: 'waterfallSilde',
 15 |   inject: ['parent'],
 16 |   props: {
 17 |     // 需要预加载的图片数组
 18 |     imgs: {
 19 |       type: Array,
 20 |       default: () => []
 21 |     },
 22 |     // 是否需要预加载
 23 |     prefetch: {
 24 |       type: Boolean,
 25 |       default: false
 26 |     }
 27 |   },
 28 |   data() {
 29 |     return {
 30 |       height: 0,
 31 |       top: 0,
 32 |       left: 0,
 33 |       resize: false,
 34 |       init: false
 35 |     }
 36 |   },
 37 |   computed: {
 38 |     _style() {
 39 |       let { width } = this.parent
 40 |       if (!this.init) {
 41 |         return {
 42 |           width: width + 'px'
 43 |         }
 44 |       }
 45 |       let style = {
 46 |         top: this.top + 'px',
 47 |         left: this.left + 'px'
 48 |       }
 49 |       if (width) {
 50 |         Object.assign(style, {
 51 |           width: width + 'px'
 52 |         })
 53 |       }
 54 |       return style
 55 |     },
 56 |     hide() {
 57 |       return !this.parent.init
 58 |     }
 59 |   },
 60 |   methods: {
 61 |     // 通知父组件添加子实例
 62 |     notificationParent() {
 63 |       this.parent.allChildren.push(this)
 64 |       this.parent.childrens.push(this)
 65 |     },
 66 |     // 刷新高度
 67 |     async getHeight() {
 68 |       try {
 69 |         await this.imgLoad()
 70 |         this.height = this.$refs.waterfallSilde.offsetHeight
 71 |       } catch (error) {
 72 |         console.error(error)
 73 |       }
 74 |     },
 75 |     // 图片不定高的时候预加载
 76 |     async imgLoad() {
 77 |       try {
 78 |         if (!this.prefetch) return Promise.resolve('跳过加载')
 79 |         if (!this.imgs.length) return Promise.resolve('跳过加载')
 80 |         return await Promise.all(
 81 |           this.imgs.map(item => {
 82 |             return this.everyImgLoad(item)
 83 |           })
 84 |         )
 85 |       } catch (error) {
 86 |         console.error(error)
 87 |       }
 88 |     },
 89 |     // 单张图片预加载
 90 |     everyImgLoad(imgSrc) {
 91 |       return new Promise((resolve, reject) => {
 92 |         let img = new Image()
 93 |         img.src = imgSrc
 94 |         img.onload = () => {
 95 |           img = null
 96 |           resolve({
 97 |             src: imgSrc,
 98 |             status: '图片加载成功'
 99 |           })
100 |         }
101 |         img.onerror = () => {
102 |           img = null
103 |           reject({
104 |             src: imgSrc,
105 |             status: '图片加载失败'
106 |           })
107 |         }
108 |       })
109 |     }
110 |   },
111 |   mounted() {
112 |     this.notificationParent()
113 |   },
114 |   destroyed() {
115 |     let index = this.parent.allChildren.indexOf(this)
116 |     this.parent.allChildren.splice(index, 1)
117 |   }
118 | }
119 | </script>
120 | 
121 | <style lang="less" scoped>
122 | .waterfall-silde {
123 |   position: absolute;
124 |   transition: left 0.5s, top 0.5s;
125 |   visibility: hidden;
126 | }
127 | .show {
128 |   visibility: visible;
129 |   animation: show-card 0.5s;
130 | }
131 | @keyframes show-card {
132 |   0% {
133 |     transform: translateY(50px);
134 |   }
135 |   100% {
136 |     transform: translateY(0);
137 |   }
138 | }
139 | </style>
140 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-waterfall-adaptive
 2 | 
 3 | [![npm](https://img.shields.io/npm/v/vue-waterfall-adaptive.svg)](https://www.npmjs.com/package/vue-waterfall-adaptive)
 4 | [![npm](https://img.shields.io/npm/dt/vue-waterfall-adaptive.svg)](https://www.npmjs.com/package/vue-waterfall-adaptive)
 5 | [![npm](https://img.shields.io/npm/l/vue-waterfall-adaptive.svg)](https://www.npmjs.com/package/vue-waterfall-adaptive)
 6 | 
 7 | ## 概述
 8 | > vue 瀑布流组件，高度自适应，响应式，支持自定义布局，支持多图模式
 9 | 
10 | [demo](https://geng452654716.github.io/vue-waterfall/dist/)
11 | 
12 | ## 安装
13 | 
14 | ### 安装 vue-waterfall-adaptive
15 | 
16 | ```sh
17 | npm install vue-waterfall-adaptive
18 | ```
19 | 
20 | ### 加载 vue-waterfall-adaptive 模块
21 | 
22 | 支持 ES6 与 commonjs 的加载方式
23 | 
24 | ```js
25 | // ES6
26 | import { waterfall, waterfallSilde } from 'vue-waterfall-adaptive';
27 | 
28 | // commonjs
29 | const waterfall = require("vue-waterfall-adaptive").waterfall;
30 | const waterfallSilde = require("vue-waterfall-adaptive").waterfallSilde;
31 | ```
32 | 也可以在 html 文件中使用 `script` 标签引入脚本，访问全局变量 `vueWaterfallAdaptive`
33 | 
34 | ```js
35 | <script src="lib/vue-waterfall-adaptive.js"></script>
36 | ```
37 | 
38 | ## 使用
39 | 
40 | ```html
41 | <waterfall>
42 |   <waterfallSilde>item1</waterfallSilde>
43 |   <waterfallSilde>item2</waterfallSilde>
44 |   <waterfallSilde>item3</waterfallSilde>
45 |   ...
46 | </waterfall>
47 | ```
48 | 
49 | ## 选项
50 | 
51 | ### waterfall 属性
52 | 
53 | | 属性            | 描述                                                           | 默认值      | 类型       | 可选项                   |
54 | | --------------- | ------------------------------------------------------------- | ----------- | --------- | ------------------------ |
55 | | top             | 初始 `top` 值                                                  | 0           | Number    |           -              |
56 | | top-interval    | 瀑布流布局上下间距                                              | 0           | Number    |           -              |
57 | | left-interval   | 瀑布流布局左右间距                                              | 0           | Number    |            -             |
58 | | width           | 宽度,组件会根据宽度自动分配每行个数                                | 320           | Number    |              -           |
59 | | loading         | 是否显示加载中的菊花图                                          | false       | Boolean   |           -              |
60 | | loading-color   | 菊花图的颜色                                                   | #969799     | String   |           -              |
61 | | offset          | 滚动条距离底部小于 `offset` 时触发 `load` 事件                   | 200         | Number    |           -              |
62 | | finished        | 是否已加载完成，加载完成后不再触发 `load` 事件                    | false       | Boolean   |           -              |
63 | | finished-txt    | 加载完成后的提示文案,如不需要,设置空字符串                         | 没有更多了~  | String   |           -              |
64 | 
65 | ### waterfall 事件
66 | 
67 | | 事件名   | 说明                                                       |
68 | | ------- | -----------------------------------------------------------|
69 | | load    | 滚动条与底部距离小于 `offset` 时触发                          | 
70 | 
71 | ### waterfall 方法
72 | 
73 | | 方法名   | 说明                                                       | 
74 | | ------- | -----------------------------------------------------------| 
75 | | reset   | 重置瀑布流布局(此方法只重置组件内部高度于位置,外部状态需自己重置,如 finished 属性,页码,数据等)|
76 | 
77 | ### waterfall 插槽
78 | 
79 | | 方法名   | 说明                                                       | 
80 | | ------- | -----------------------------------------------------------| 
81 | | default   | 默认插槽,插入 waterfallSilde 组件                           |
82 | | loading   | 自定义 loading 效果                           |
83 | 
84 | ### waterfallSilde 属性
85 | 
86 | | 属性     | 描述                                                                   |  默认值       | 类型      |
87 | | -------  | -----------------------------------------------------------            | ----------- | --------- |
88 | | prefetch | 是否需要预加载，在图片不定高时需要设置为 `true`，会预加载所有图片。 预加载时为了保证数据，会阻塞后续渲染   |     false     | Boolean|
89 | | imgs     | 需要预加载的图片数组，数组每一项为图片 url   |     [ ]     | string[ ] |
90 | ## 许可
91 | 
92 | MIT@[geng452654716](https://github.com/geng452654716)
93 | 


--------------------------------------------------------------------------------
/.idea/codeStyles/Project.xml:
--------------------------------------------------------------------------------
  1 | <component name="ProjectCodeStyleConfiguration">
  2 |   <code_scheme name="Project" version="173">
  3 |     <HTMLCodeStyleSettings>
  4 |       <option name="HTML_KEEP_WHITESPACES" value="true" />
  5 |       <option name="HTML_ATTRIBUTE_WRAP" value="2" />
  6 |       <option name="HTML_ALIGN_TEXT" value="true" />
  7 |       <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
  8 |       <option name="HTML_DO_NOT_ALIGN_CHILDREN_OF_MIN_LINES" value="2" />
  9 |       <option name="HTML_NEWLINE_BEFORE_FIRST_ATTRIBUTE" value="When multiline" />
 10 |       <option name="HTML_NEWLINE_AFTER_LAST_ATTRIBUTE" value="When multiline" />
 11 |     </HTMLCodeStyleSettings>
 12 |     <JSCodeStyleSettings version="0">
 13 |       <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
 14 |       <option name="FORCE_SEMICOLON_STYLE" value="true" />
 15 |       <option name="SPACE_BEFORE_GENERATOR_MULT" value="true" />
 16 |       <option name="ALIGN_VAR_STATEMENTS" value="1" />
 17 |       <option name="USE_DOUBLE_QUOTES" value="false" />
 18 |       <option name="FORCE_QUOTE_STYlE" value="true" />
 19 |       <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
 20 |       <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
 21 |       <option name="SPACES_WITHIN_IMPORTS" value="true" />
 22 |     </JSCodeStyleSettings>
 23 |     <editorconfig>
 24 |       <option name="ENABLED" value="false" />
 25 |     </editorconfig>
 26 |     <codeStyleSettings language="CSS">
 27 |       <indentOptions>
 28 |         <option name="INDENT_SIZE" value="2" />
 29 |         <option name="TAB_SIZE" value="2" />
 30 |       </indentOptions>
 31 |     </codeStyleSettings>
 32 |     <codeStyleSettings language="HTML">
 33 |       <option name="WRAP_ON_TYPING" value="1" />
 34 |       <indentOptions>
 35 |         <option name="INDENT_SIZE" value="2" />
 36 |         <option name="CONTINUATION_INDENT_SIZE" value="2" />
 37 |         <option name="TAB_SIZE" value="2" />
 38 |         <option name="USE_TAB_CHARACTER" value="true" />
 39 |         <option name="SMART_TABS" value="true" />
 40 |         <option name="KEEP_INDENTS_ON_EMPTY_LINES" value="true" />
 41 |       </indentOptions>
 42 |     </codeStyleSettings>
 43 |     <codeStyleSettings language="JSON">
 44 |       <indentOptions>
 45 |         <option name="TAB_SIZE" value="2" />
 46 |         <option name="USE_TAB_CHARACTER" value="true" />
 47 |         <option name="SMART_TABS" value="true" />
 48 |         <option name="KEEP_INDENTS_ON_EMPTY_LINES" value="true" />
 49 |       </indentOptions>
 50 |     </codeStyleSettings>
 51 |     <codeStyleSettings language="Jade">
 52 |       <indentOptions>
 53 |         <option name="INDENT_SIZE" value="2" />
 54 |         <option name="TAB_SIZE" value="2" />
 55 |       </indentOptions>
 56 |     </codeStyleSettings>
 57 |     <codeStyleSettings language="JavaScript">
 58 |       <option name="KEEP_BLANK_LINES_IN_CODE" value="1" />
 59 |       <option name="ALIGN_MULTILINE_PARAMETERS" value="false" />
 60 |       <option name="ALIGN_MULTILINE_FOR" value="false" />
 61 |       <option name="SPACE_WITHIN_IF_PARENTHESES" value="true" />
 62 |       <option name="SPACE_WITHIN_FOR_PARENTHESES" value="true" />
 63 |       <option name="SPACE_BEFORE_METHOD_PARENTHESES" value="true" />
 64 |       <option name="PREFER_PARAMETERS_WRAP" value="true" />
 65 |       <option name="KEEP_SIMPLE_BLOCKS_IN_ONE_LINE" value="true" />
 66 |       <option name="KEEP_SIMPLE_METHODS_IN_ONE_LINE" value="true" />
 67 |       <option name="IF_BRACE_FORCE" value="1" />
 68 |       <option name="DOWHILE_BRACE_FORCE" value="1" />
 69 |       <option name="WHILE_BRACE_FORCE" value="1" />
 70 |       <option name="FOR_BRACE_FORCE" value="1" />
 71 |       <indentOptions>
 72 |         <option name="INDENT_SIZE" value="2" />
 73 |         <option name="CONTINUATION_INDENT_SIZE" value="2" />
 74 |         <option name="TAB_SIZE" value="2" />
 75 |         <option name="SMART_TABS" value="true" />
 76 |       </indentOptions>
 77 |     </codeStyleSettings>
 78 |     <codeStyleSettings language="LESS">
 79 |       <indentOptions>
 80 |         <option name="TAB_SIZE" value="2" />
 81 |       </indentOptions>
 82 |     </codeStyleSettings>
 83 |     <codeStyleSettings language="SASS">
 84 |       <indentOptions>
 85 |         <option name="TAB_SIZE" value="2" />
 86 |       </indentOptions>
 87 |     </codeStyleSettings>
 88 |     <codeStyleSettings language="SCSS">
 89 |       <indentOptions>
 90 |         <option name="TAB_SIZE" value="2" />
 91 |       </indentOptions>
 92 |     </codeStyleSettings>
 93 |     <codeStyleSettings language="Stylus">
 94 |       <indentOptions>
 95 |         <option name="TAB_SIZE" value="2" />
 96 |       </indentOptions>
 97 |     </codeStyleSettings>
 98 |     <codeStyleSettings language="TypeScript">
 99 |       <indentOptions>
100 |         <option name="INDENT_SIZE" value="2" />
101 |         <option name="CONTINUATION_INDENT_SIZE" value="2" />
102 |         <option name="TAB_SIZE" value="2" />
103 |       </indentOptions>
104 |     </codeStyleSettings>
105 |   </code_scheme>
106 | </component>


--------------------------------------------------------------------------------
/src/vue-waterfall/waterfall.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="waterfall"
  4 |     :class="{
  5 |       resize,
  6 |       'waterfall-loading-show': (loading && !mount) || (finished && finishedTxt)
  7 |     }"
  8 |     :style="waterfallStyle"
  9 |     ref="waterfall"
 10 |   >
 11 |     <slot></slot>
 12 |     <div class="waterfall-loading-warp" v-show="!mount" v-if="loading">
 13 |       <slot name="loading" v-if="$slots.loading"></slot>
 14 |       <span class="waterfall-loading" :style="{ color: loadingColor }" v-else>
 15 |         <i v-for="(item, index) in 12" :key="index"></i>
 16 |       </span>
 17 |     </div>
 18 |     <div class="finished" v-if="finished && finishedTxt">{{ finishedTxt }}</div>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script>
 23 | import debounce from 'lodash/debounce'
 24 | import throttle from 'lodash/throttle'
 25 | let defaultInnerWidth = 0
 26 | export default {
 27 |   name: 'waterfall',
 28 |   provide() {
 29 |     return {
 30 |       parent: this
 31 |     }
 32 |   },
 33 |   props: {
 34 |     // 起始top值
 35 |     top: {
 36 |       type: Number,
 37 |       default: 0
 38 |     },
 39 |     // 上下间隔
 40 |     topInterval: {
 41 |       type: Number,
 42 |       default: 20
 43 |     },
 44 |     // 左右间隔
 45 |     leftInterval: {
 46 |       type: Number,
 47 |       default: 20
 48 |     },
 49 |     // 瀑布流宽度
 50 |     width: {
 51 |       type: Number,
 52 |       default: 320
 53 |     },
 54 |     // 加载的颜色
 55 |     loadingColor: {
 56 |       type: String,
 57 |       default: '#969799'
 58 |     },
 59 |     // 是否需要菊花加载图
 60 |     loading: {
 61 |       type: Boolean,
 62 |       default: false
 63 |     },
 64 |     // 滚动条距离底部小于 offset 时触发 load 事件
 65 |     offset: {
 66 |       type: Number,
 67 |       default: 200
 68 |     },
 69 |     // 是否全部加载完成,不在触发 load 事件
 70 |     finished: {
 71 |       type: Boolean,
 72 |       default: false
 73 |     },
 74 |     // 全部加载完成文本
 75 |     finishedTxt: {
 76 |       type: String,
 77 |       default: '没有更多了~'
 78 |     }
 79 |   },
 80 |   data() {
 81 |     return {
 82 |       // 瀑布流外包裹高度
 83 |       waterfallBoxHeight: 0,
 84 |       // 触发滚动的最小高度
 85 |       scrollMinHeight: 0,
 86 |       // 瀑布流没列个数
 87 |       rowNumber: 0,
 88 |       // 初始数据
 89 |       initData: null,
 90 |       // 子元素
 91 |       childrens: [],
 92 |       // 已经有位置的子元素
 93 |       allChildren: [],
 94 |       // 瀑布流每个的宽度
 95 |       slideWidth: 0,
 96 |       // 是否更新视口
 97 |       resize: false,
 98 |       // 起始 left 值
 99 |       left: 0,
100 |       // 是否挂载完成
101 |       mount: false
102 |     }
103 |   },
104 |   methods: {
105 |     // 获取初始 left 值
106 |     getLeftValue() {
107 |       this.left =
108 |         (this.$refs.waterfall.clientWidth -
109 |           this.slideWidth * this.rowNumber -
110 |           (this.rowNumber - 1) * this.leftInterval) /
111 |         2
112 |     },
113 |     // 获取瀑布流没列个数
114 |     getRowNumber() {
115 |       this.rowNumber = Math.floor(
116 |         this.$refs.waterfall.clientWidth / (this.slideWidth + this.leftInterval)
117 |       )
118 |     },
119 |     // 获取silde宽度
120 |     getSildeWidth() {
121 |       if (this.width) {
122 |         this.slideWidth = this.width
123 |       }
124 |       if (this.allChildren.length) {
125 |         this.slideWidth = this.allChildren[0].$el.offsetWidth
126 |       }
127 |     },
128 |     // 初始数据
129 |     getInitData() {
130 |       this.initData = Array.from({ length: this.rowNumber }).map(
131 |         (item, index) => {
132 |           return {
133 |             top: this.top,
134 |             left: this.left + (this.slideWidth + this.leftInterval) * index
135 |           }
136 |         }
137 |       )
138 |     },
139 |     // 计算瀑布流dom位置
140 |     async waterFall(children) {
141 |       if (!children.length) return
142 |       for (let i = 0; i < children.length; i++) {
143 |         if (children[i].height) continue
144 |         await children[i].getHeight(i)
145 |       }
146 |       children.forEach(item => {
147 |         item.top = this.initData[0].top
148 |         item.left = this.initData[0].left
149 |         this.initData[0].top += item.height + this.topInterval
150 |         item.init = true
151 |         this.initData.sort((a, b) => {
152 |           return a.top - b.top
153 |         })
154 |       })
155 |       this.childrens = []
156 |       this.waterfallBoxHeight = [...this.initData].pop().top
157 |       this.scrollMinHeight = [...this.initData].shift().top
158 |       this.mount = true
159 |     },
160 |     // 更新布局
161 |     _refreshWaterfall() {
162 |       if (innerWidth !== defaultInnerWidth) {
163 |         this.getRowNumber()
164 |         this.getInitData()
165 |         this.waterFall(this.allChildren)
166 |       }
167 |     },
168 |     // 初始化
169 |     _initWaterfall() {
170 |       this.getSildeWidth()
171 |       this.getRowNumber()
172 |       this.getLeftValue()
173 |       this.getInitData()
174 |     },
175 |     // 滚动判断，加载更多
176 |     handleScroll() {
177 |       let waterfall = this.$refs.waterfall
178 |       if (!waterfall || !this.mount || this.finished) return
179 |       let scrollTop = document.scrollingElement.scrollTop
180 |       let waterfallButtom =
181 |         waterfall.offsetTop + this.scrollMinHeight - this.offset - innerHeight
182 |       if (scrollTop > waterfallButtom) {
183 |         this.$emit('load')
184 |         this.mount = false
185 |       }
186 |     },
187 |     // 重置数据
188 |     reset() {
189 |       this.initData = null
190 |       this.waterfallBoxHeight = 0
191 |       this.scrollMinHeight = 0
192 |       this.rowNumber = 0
193 |       this.slideWidth = 0
194 |       this.resize = false
195 |       this.left = 0
196 |       this.mount = false
197 |       this.$nextTick(() => {
198 |         this._refreshWaterfall()
199 |       })
200 |     }
201 |   },
202 |   computed: {
203 |     // 视口变化
204 |     resizeBindFn() {
205 |       return debounce(this._refreshWaterfall, 200)
206 |     },
207 |     // 滚动
208 |     scrollBindFn() {
209 |       return throttle(this.handleScroll, 200)
210 |     },
211 |     // 获取瀑布流主体高度
212 |     waterfallStyle() {
213 |       return { height: this.waterfallBoxHeight + 'px' }
214 |     }
215 |   },
216 |   watch: {
217 |     // 监听瀑布流子级变化
218 |     childrens(val) {
219 |       if (!val.length) return
220 |       if (!this.initData) {
221 |         this._initWaterfall()
222 |       }
223 |       this.mount = false
224 |       this.waterFall(val)
225 |     },
226 |     // 监听是否加载完成
227 |     finished(val) {
228 |       if (val) {
229 |         window.removeEventListener('scroll', this.scrollBindFn)
230 |       } else {
231 |         window.addEventListener('scroll', this.scrollBindFn)
232 |       }
233 |     }
234 |   },
235 |   activated() {
236 |     window.addEventListener('resize', this.resizeBindFn)
237 |     window.addEventListener('scroll', this.scrollBindFn)
238 |     this._refreshWaterfall()
239 |   },
240 |   deactivated() {
241 |     window.removeEventListener('resize', this.resizeBindFn)
242 |     window.removeEventListener('scroll', this.scrollBindFn)
243 |   },
244 |   mounted() {
245 |     defaultInnerWidth = innerWidth
246 |     window.addEventListener('resize', this.resizeBindFn)
247 |     window.addEventListener('scroll', this.scrollBindFn)
248 |   },
249 |   destroyed() {
250 |     window.removeEventListener('resize', this.resizeBindFn)
251 |     window.removeEventListener('scroll', this.scrollBindFn)
252 |   }
253 | }
254 | </script>
255 | 
256 | <style lang="less" scoped>
257 | .waterfall {
258 |   position: relative;
259 |   width: 100%;
260 |   overflow: hidden;
261 | }
262 | .waterfall-loading-show {
263 |   padding-bottom: 100px;
264 | }
265 | .waterfall-loading-warp {
266 |   position: absolute;
267 |   left: 50%;
268 |   bottom: 30px;
269 |   transform: translateX(-50%);
270 | }
271 | .waterfall-loading {
272 |   width: 30px;
273 |   height: 30px;
274 |   box-sizing: border-box;
275 |   animation: loading-rotate 0.8s linear infinite;
276 |   animation-timing-function: steps(12);
277 |   position: relative;
278 |   display: inline-block;
279 |   i {
280 |     top: 0;
281 |     left: 0;
282 |     width: 100%;
283 |     height: 100%;
284 |     position: absolute;
285 |     &::before {
286 |       width: 2px;
287 |       height: 25%;
288 |       content: ' ';
289 |       display: block;
290 |       margin: 0 auto;
291 |       border-radius: 40%;
292 |       background-color: currentColor;
293 |     }
294 |   }
295 | }
296 | .finished {
297 |   width: 100%;
298 |   text-align: center;
299 |   font-size: 14px;
300 |   color: #969799;
301 |   line-height: 50px;
302 |   position: absolute;
303 |   bottom: 20px;
304 | }
305 | 
306 | @keyframes loading-rotate {
307 |   0% {
308 |     transform: rotate(0deg);
309 |   }
310 |   100% {
311 |     transform: rotate(360deg);
312 |   }
313 | }
314 | .generate-spinner(@n, @i: 1) when (@i =< @n) {
315 |   .waterfall-loading i:nth-of-type(@{i}) {
316 |     opacity: 1 - (0.75 / 12) * (@i - 1);
317 |     transform: rotate(@i * 30deg);
318 |   }
319 |   .generate-spinner(@n, (@i + 1));
320 | }
321 | .generate-spinner(12);
322 | </style>
323 | 


--------------------------------------------------------------------------------
/src/dom/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="dom">
  3 |     <button @click="onreset">重置数据</button>
  4 |     <waterfall
  5 |       :loading="true"
  6 |       :topInterval="20"
  7 |       @load="load"
  8 |       :finished="finished"
  9 |       ref="waterfall"
 10 |     >
 11 |       <waterfall-silde
 12 |         v-for="(item, index) in waterfallData"
 13 |         :key="index"
 14 |         :imgs="item.imgs"
 15 |         prefetch
 16 |       >
 17 |         <div class="grid-item" @click="handleClick(item)">
 18 |           <p class="said" v-if="item.said">{{ item.said }}</p>
 19 |           <div class="viewers" v-if="item.imgs">
 20 |             <img
 21 |               v-for="(img, i) in item.imgs"
 22 |               :key="i"
 23 |               :src="img"
 24 |               class="img"
 25 |               :class="waterfallImgClass(item)"
 26 |             />
 27 |           </div>
 28 |           <div class="info">
 29 |             <p class="avatar">
 30 |               <img :src="item.avatar" />
 31 |               <span>{{ item.name }}</span>
 32 |             </p>
 33 |             <p class="list" v-for="describe in item.describe" :key="describe">
 34 |               {{ describe }}
 35 |             </p>
 36 |           </div>
 37 |         </div>
 38 |       </waterfall-silde>
 39 |     </waterfall>
 40 |   </div>
 41 | </template>
 42 | 
 43 | <script>
 44 | import { waterfall, waterfallSilde } from '../vue-waterfall/index'
 45 | export default {
 46 |   components: {
 47 |     waterfall,
 48 |     waterfallSilde
 49 |   },
 50 |   data() {
 51 |     return {
 52 |       // 是否正在加载
 53 |       loading: false,
 54 |       // 是否加载完成
 55 |       finished: false,
 56 |       // 瀑布流数据
 57 |       waterfallData: [],
 58 |       // 页码
 59 |       page: 1
 60 |     }
 61 |   },
 62 |   computed: {
 63 |     waterfallImgClass() {
 64 |       let classMap = {
 65 |         1: 'one',
 66 |         2: 'two',
 67 |         default: 'more'
 68 |       }
 69 |       return item => {
 70 |         return classMap[item.imgs.length] || classMap['default']
 71 |       }
 72 |     }
 73 |   },
 74 |   methods: {
 75 |     load() {
 76 |       this.page++
 77 |       if (this.page > 10) {
 78 |         this.finished = true
 79 |       }
 80 |       let mock = [
 81 |         {
 82 |           imgs: [
 83 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
 84 |             'http://n.sinaimg.cn/sinacn/w600h600/20180222/bf4c-fyrswmu7949822.jpg',
 85 |             'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592483696758&di=88d7d4188d905b94d5cad914a68aec66&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn14%2F274%2Fw640h434%2F20180723%2Fb828-hftenhy9380802.jpg'
 86 |           ],
 87 |           title: '二哈为什么不能当警犬？',
 88 |           said:
 89 |             '二哈不能当警犬的最大的原因是也许在执行任务中与犯罪分子达成共识！',
 90 |           avatar:
 91 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
 92 |           name: '大哈',
 93 |           describe: ['我是二哈我骄傲']
 94 |         },
 95 |         {
 96 |           imgs: [
 97 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
 98 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg'
 99 |           ],
100 |           title: '二哈是真傻还是假傻',
101 |           avatar:
102 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
103 |           name: '二哈',
104 |           describe: ['我拆家我骄傲']
105 |         },
106 |         {
107 |           imgs: [
108 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg'
109 |           ],
110 |           title: '二哈是真傻还是假傻',
111 |           avatar:
112 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg',
113 |           name: '三哈',
114 |           describe: ['什么都逃不过的我手掌']
115 |         },
116 |         {
117 |           title: '二哈是真傻还是假傻',
118 |           said:
119 |             '二哈的拆家出了名的，被称为拆迁队队长，精力旺盛，它总是要玩、要跑、要跳，一哈顶三虎，三哈沉航母，五哈斗上帝，十哈创世纪，百花毁灭银河系，千哈称霸宇宙第一，所以一般能养哈士奇的人都是非富则贵！',
120 |           avatar:
121 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg',
122 |           name: '四哈',
123 |           describe: ['养只二哈欢乐多']
124 |         },
125 |         {
126 |           imgs: [
127 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
128 |             'http://n.sinaimg.cn/sinacn/w600h600/20180222/bf4c-fyrswmu7949822.jpg',
129 |             'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592483696758&di=88d7d4188d905b94d5cad914a68aec66&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn14%2F274%2Fw640h434%2F20180723%2Fb828-hftenhy9380802.jpg'
130 |           ],
131 |           title: '二哈为什么不能当警犬？',
132 |           said:
133 |             '二哈不能当警犬的最大的原因是也许在执行任务中与犯罪分子达成共识！',
134 |           avatar:
135 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
136 |           name: '大哈',
137 |           describe: ['我是二哈我骄傲']
138 |         },
139 |         {
140 |           imgs: [
141 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
142 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg'
143 |           ],
144 |           title: '二哈是真傻还是假傻',
145 |           avatar:
146 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
147 |           name: '二哈',
148 |           describe: ['我拆家我骄傲']
149 |         },
150 |         {
151 |           imgs: [
152 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg'
153 |           ],
154 |           title: '二哈是真傻还是假傻',
155 |           avatar:
156 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg',
157 |           name: '三哈',
158 |           describe: ['什么都逃不过的我手掌']
159 |         },
160 |         {
161 |           title: '二哈是真傻还是假傻',
162 |           said:
163 |             '二哈的拆家出了名的，被称为拆迁队队长，精力旺盛，它总是要玩、要跑、要跳，一哈顶三虎，三哈沉航母，五哈斗上帝，十哈创世纪，百花毁灭银河系，千哈称霸宇宙第一，所以一般能养哈士奇的人都是非富则贵！',
164 |           avatar:
165 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg',
166 |           name: '四哈',
167 |           describe: ['养只二哈欢乐多']
168 |         },
169 |         {
170 |           imgs: [
171 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
172 |             'http://n.sinaimg.cn/sinacn/w600h600/20180222/bf4c-fyrswmu7949822.jpg',
173 |             'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592483696758&di=88d7d4188d905b94d5cad914a68aec66&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn14%2F274%2Fw640h434%2F20180723%2Fb828-hftenhy9380802.jpg'
174 |           ],
175 |           title: '二哈为什么不能当警犬？',
176 |           said:
177 |             '二哈不能当警犬的最大的原因是也许在执行任务中与犯罪分子达成共识！',
178 |           avatar:
179 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
180 |           name: '大哈',
181 |           describe: ['我是二哈我骄傲']
182 |         },
183 |         {
184 |           imgs: [
185 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
186 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg'
187 |           ],
188 |           title: '二哈是真傻还是假傻',
189 |           avatar:
190 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
191 |           name: '二哈',
192 |           describe: ['我拆家我骄傲']
193 |         },
194 |         {
195 |           imgs: [
196 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg'
197 |           ],
198 |           title: '二哈是真傻还是假傻',
199 |           avatar:
200 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg',
201 |           name: '三哈',
202 |           describe: ['什么都逃不过的我手掌']
203 |         },
204 |         {
205 |           title: '二哈是真傻还是假傻',
206 |           said:
207 |             '二哈的拆家出了名的，被称为拆迁队队长，精力旺盛，它总是要玩、要跑、要跳，一哈顶三虎，三哈沉航母，五哈斗上帝，十哈创世纪，百花毁灭银河系，千哈称霸宇宙第一，所以一般能养哈士奇的人都是非富则贵！',
208 |           avatar:
209 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg',
210 |           name: '四哈',
211 |           describe: ['养只二哈欢乐多']
212 |         },
213 |         {
214 |           imgs: [
215 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
216 |             'http://n.sinaimg.cn/sinacn/w600h600/20180222/bf4c-fyrswmu7949822.jpg',
217 |             'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592483696758&di=88d7d4188d905b94d5cad914a68aec66&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn14%2F274%2Fw640h434%2F20180723%2Fb828-hftenhy9380802.jpg'
218 |           ],
219 |           title: '二哈为什么不能当警犬？',
220 |           said:
221 |             '二哈不能当警犬的最大的原因是也许在执行任务中与犯罪分子达成共识！',
222 |           avatar:
223 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
224 |           name: '大哈',
225 |           describe: ['我是二哈我骄傲']
226 |         },
227 |         {
228 |           imgs: [
229 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
230 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg'
231 |           ],
232 |           title: '二哈是真傻还是假傻',
233 |           avatar:
234 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
235 |           name: '二哈',
236 |           describe: ['我拆家我骄傲']
237 |         },
238 |         {
239 |           imgs: [
240 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg'
241 |           ],
242 |           title: '二哈是真傻还是假傻',
243 |           avatar:
244 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg',
245 |           name: '三哈',
246 |           describe: ['什么都逃不过的我手掌']
247 |         },
248 |         {
249 |           title: '二哈是真傻还是假傻',
250 |           said:
251 |             '二哈的拆家出了名的，被称为拆迁队队长，精力旺盛，它总是要玩、要跑、要跳，一哈顶三虎，三哈沉航母，五哈斗上帝，十哈创世纪，百花毁灭银河系，千哈称霸宇宙第一，所以一般能养哈士奇的人都是非富则贵！',
252 |           avatar:
253 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg',
254 |           name: '四哈',
255 |           describe: ['养只二哈欢乐多']
256 |         },
257 |         {
258 |           imgs: [
259 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
260 |             'http://n.sinaimg.cn/sinacn/w600h600/20180222/bf4c-fyrswmu7949822.jpg',
261 |             'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592483696758&di=88d7d4188d905b94d5cad914a68aec66&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn14%2F274%2Fw640h434%2F20180723%2Fb828-hftenhy9380802.jpg'
262 |           ],
263 |           title: '二哈为什么不能当警犬？',
264 |           said:
265 |             '二哈不能当警犬的最大的原因是也许在执行任务中与犯罪分子达成共识！',
266 |           avatar:
267 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
268 |           name: '大哈',
269 |           describe: ['我是二哈我骄傲']
270 |         },
271 |         {
272 |           imgs: [
273 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
274 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg'
275 |           ],
276 |           title: '二哈是真傻还是假傻',
277 |           avatar:
278 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
279 |           name: '二哈',
280 |           describe: ['我拆家我骄傲']
281 |         },
282 |         {
283 |           imgs: [
284 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg'
285 |           ],
286 |           title: '二哈是真傻还是假傻',
287 |           avatar:
288 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg',
289 |           name: '三哈',
290 |           describe: ['什么都逃不过的我手掌']
291 |         },
292 |         {
293 |           title: '二哈是真傻还是假傻',
294 |           said:
295 |             '二哈的拆家出了名的，被称为拆迁队队长，精力旺盛，它总是要玩、要跑、要跳，一哈顶三虎，三哈沉航母，五哈斗上帝，十哈创世纪，百花毁灭银河系，千哈称霸宇宙第一，所以一般能养哈士奇的人都是非富则贵！',
296 |           avatar:
297 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg',
298 |           name: '四哈',
299 |           describe: ['养只二哈欢乐多']
300 |         }
301 |       ]
302 |       this.waterfallData.push(...mock.sort(() => Math.random() - 0.5))
303 |     },
304 |     // 重置数据
305 |     onreset() {
306 |       this.page = 1
307 |       this.finished = false
308 |       this.waterfallData = []
309 |       this.$refs.waterfall.reset()
310 |       this.getData()
311 |     },
312 |     getData() {
313 |       this.waterfallData = [
314 |         {
315 |           imgs: [
316 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
317 |             'http://n.sinaimg.cn/sinacn/w600h600/20180222/bf4c-fyrswmu7949822.jpg',
318 |             'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592483696758&di=88d7d4188d905b94d5cad914a68aec66&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn14%2F274%2Fw640h434%2F20180723%2Fb828-hftenhy9380802.jpg'
319 |           ],
320 |           title: '二哈为什么不能当警犬？',
321 |           said:
322 |             '二哈不能当警犬的最大的原因是也许在执行任务中与犯罪分子达成共识！',
323 |           avatar:
324 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
325 |           name: '大哈',
326 |           describe: ['我是二哈我骄傲']
327 |         },
328 |         {
329 |           imgs: [
330 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
331 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg'
332 |           ],
333 |           title: '二哈是真傻还是假傻',
334 |           avatar:
335 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
336 |           name: '二哈',
337 |           describe: ['我拆家我骄傲']
338 |         },
339 |         {
340 |           imgs: [
341 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg'
342 |           ],
343 |           title: '二哈是真傻还是假傻',
344 |           avatar:
345 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg',
346 |           name: '三哈',
347 |           describe: ['什么都逃不过的我手掌']
348 |         },
349 |         {
350 |           title: '二哈是真傻还是假傻',
351 |           said:
352 |             '二哈的拆家出了名的，被称为拆迁队队长，精力旺盛，它总是要玩、要跑、要跳，一哈顶三虎，三哈沉航母，五哈斗上帝，十哈创世纪，百花毁灭银河系，千哈称霸宇宙第一，所以一般能养哈士奇的人都是非富则贵！',
353 |           avatar:
354 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg',
355 |           name: '四哈',
356 |           describe: ['养只二哈欢乐多']
357 |         },
358 |         {
359 |           imgs: [
360 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
361 |             'http://n.sinaimg.cn/sinacn/w600h600/20180222/bf4c-fyrswmu7949822.jpg',
362 |             'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592483696758&di=88d7d4188d905b94d5cad914a68aec66&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn14%2F274%2Fw640h434%2F20180723%2Fb828-hftenhy9380802.jpg'
363 |           ],
364 |           title: '二哈为什么不能当警犬？',
365 |           said:
366 |             '二哈不能当警犬的最大的原因是也许在执行任务中与犯罪分子达成共识！',
367 |           avatar:
368 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
369 |           name: '大哈',
370 |           describe: ['我是二哈我骄傲']
371 |         },
372 |         {
373 |           imgs: [
374 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
375 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg'
376 |           ],
377 |           title: '二哈是真傻还是假傻',
378 |           avatar:
379 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
380 |           name: '二哈',
381 |           describe: ['我拆家我骄傲']
382 |         },
383 |         {
384 |           imgs: [
385 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg'
386 |           ],
387 |           title: '二哈是真傻还是假傻',
388 |           avatar:
389 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg',
390 |           name: '三哈',
391 |           describe: ['什么都逃不过的我手掌']
392 |         },
393 |         {
394 |           title: '二哈是真傻还是假傻',
395 |           said:
396 |             '二哈的拆家出了名的，被称为拆迁队队长，精力旺盛，它总是要玩、要跑、要跳，一哈顶三虎，三哈沉航母，五哈斗上帝，十哈创世纪，百花毁灭银河系，千哈称霸宇宙第一，所以一般能养哈士奇的人都是非富则贵！',
397 |           avatar:
398 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg',
399 |           name: '四哈',
400 |           describe: ['养只二哈欢乐多']
401 |         },
402 |         {
403 |           imgs: [
404 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
405 |             'http://n.sinaimg.cn/sinacn/w600h600/20180222/bf4c-fyrswmu7949822.jpg',
406 |             'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592483696758&di=88d7d4188d905b94d5cad914a68aec66&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn14%2F274%2Fw640h434%2F20180723%2Fb828-hftenhy9380802.jpg'
407 |           ],
408 |           title: '二哈为什么不能当警犬？',
409 |           said:
410 |             '二哈不能当警犬的最大的原因是也许在执行任务中与犯罪分子达成共识！',
411 |           avatar:
412 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
413 |           name: '大哈',
414 |           describe: ['我是二哈我骄傲']
415 |         },
416 |         {
417 |           imgs: [
418 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
419 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg'
420 |           ],
421 |           title: '二哈是真傻还是假傻',
422 |           avatar:
423 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
424 |           name: '二哈',
425 |           describe: ['我拆家我骄傲']
426 |         },
427 |         {
428 |           imgs: [
429 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg'
430 |           ],
431 |           title: '二哈是真傻还是假傻',
432 |           avatar:
433 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg',
434 |           name: '三哈',
435 |           describe: ['什么都逃不过的我手掌']
436 |         },
437 |         {
438 |           title: '二哈是真傻还是假傻',
439 |           said:
440 |             '二哈的拆家出了名的，被称为拆迁队队长，精力旺盛，它总是要玩、要跑、要跳，一哈顶三虎，三哈沉航母，五哈斗上帝，十哈创世纪，百花毁灭银河系，千哈称霸宇宙第一，所以一般能养哈士奇的人都是非富则贵！',
441 |           avatar:
442 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg',
443 |           name: '四哈',
444 |           describe: ['养只二哈欢乐多']
445 |         },
446 |         {
447 |           imgs: [
448 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
449 |             'http://n.sinaimg.cn/sinacn/w600h600/20180222/bf4c-fyrswmu7949822.jpg',
450 |             'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592483696758&di=88d7d4188d905b94d5cad914a68aec66&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn14%2F274%2Fw640h434%2F20180723%2Fb828-hftenhy9380802.jpg'
451 |           ],
452 |           title: '二哈为什么不能当警犬？',
453 |           said:
454 |             '二哈不能当警犬的最大的原因是也许在执行任务中与犯罪分子达成共识！',
455 |           avatar:
456 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
457 |           name: '大哈',
458 |           describe: ['我是二哈我骄傲']
459 |         },
460 |         {
461 |           imgs: [
462 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
463 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg'
464 |           ],
465 |           title: '二哈是真傻还是假傻',
466 |           avatar:
467 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
468 |           name: '二哈',
469 |           describe: ['我拆家我骄傲']
470 |         },
471 |         {
472 |           imgs: [
473 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg'
474 |           ],
475 |           title: '二哈是真傻还是假傻',
476 |           avatar:
477 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg',
478 |           name: '三哈',
479 |           describe: ['什么都逃不过的我手掌']
480 |         },
481 |         {
482 |           title: '二哈是真傻还是假傻',
483 |           said:
484 |             '二哈的拆家出了名的，被称为拆迁队队长，精力旺盛，它总是要玩、要跑、要跳，一哈顶三虎，三哈沉航母，五哈斗上帝，十哈创世纪，百花毁灭银河系，千哈称霸宇宙第一，所以一般能养哈士奇的人都是非富则贵！',
485 |           avatar:
486 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg',
487 |           name: '四哈',
488 |           describe: ['养只二哈欢乐多']
489 |         },
490 |         {
491 |           imgs: [
492 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
493 |             'http://n.sinaimg.cn/sinacn/w600h600/20180222/bf4c-fyrswmu7949822.jpg',
494 |             'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592483696758&di=88d7d4188d905b94d5cad914a68aec66&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn14%2F274%2Fw640h434%2F20180723%2Fb828-hftenhy9380802.jpg'
495 |           ],
496 |           title: '二哈为什么不能当警犬？',
497 |           said:
498 |             '二哈不能当警犬的最大的原因是也许在执行任务中与犯罪分子达成共识！',
499 |           avatar:
500 |             'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1052131196,1689306403&fm=26&gp=0.jpg',
501 |           name: '大哈',
502 |           describe: ['我是二哈我骄傲']
503 |         },
504 |         {
505 |           imgs: [
506 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
507 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg'
508 |           ],
509 |           title: '二哈是真傻还是假傻',
510 |           avatar:
511 |             'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2124915863,554082401&fm=26&gp=0.jpg',
512 |           name: '二哈',
513 |           describe: ['我拆家我骄傲']
514 |         },
515 |         {
516 |           imgs: [
517 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg'
518 |           ],
519 |           title: '二哈是真傻还是假傻',
520 |           avatar:
521 |             'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1063873711,3809085003&fm=26&gp=0.jpg',
522 |           name: '三哈',
523 |           describe: ['什么都逃不过的我手掌']
524 |         },
525 |         {
526 |           title: '二哈是真傻还是假傻',
527 |           said:
528 |             '二哈的拆家出了名的，被称为拆迁队队长，精力旺盛，它总是要玩、要跑、要跳，一哈顶三虎，三哈沉航母，五哈斗上帝，十哈创世纪，百花毁灭银河系，千哈称霸宇宙第一，所以一般能养哈士奇的人都是非富则贵！',
529 |           avatar:
530 |             'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg',
531 |           name: '四哈',
532 |           describe: ['养只二哈欢乐多']
533 |         }
534 |       ]
535 |     },
536 |     handleClick(item) {
537 |       this.$router.push({
538 |         path: '/details',
539 |         query: {
540 |           img: item.avatar
541 |         }
542 |       })
543 |     }
544 |   },
545 |   created() {
546 |     this.getData()
547 |   }
548 | }
549 | </script>
550 | 
551 | <style lang="less" scoped>
552 | .dom {
553 |   background-color: #efefef;
554 | }
555 | .waterfall {
556 |   .grid-item {
557 |     background-color: #fff;
558 |     padding: 16px;
559 |     box-sizing: border-box;
560 |     border: 1px solid #000;
561 |     .viewers {
562 |       display: flex;
563 |       justify-content: space-around;
564 |       flex-wrap: wrap;
565 |       overflow: hidden;
566 |     }
567 |     .img {
568 |       object-fit: cover;
569 |       &.one {
570 |         width: 100%;
571 |       }
572 |       &.two {
573 |         width: 140px;
574 |         height: 140px;
575 |       }
576 |       &.more {
577 |         width: 90px;
578 |         height: 90px;
579 |       }
580 |     }
581 |   }
582 |   .said {
583 |     line-height: 22px;
584 |     margin-bottom: 30px;
585 |     font-size: 14px;
586 |     word-wrap: break-word;
587 |     .bold {
588 |       font-weight: 700;
589 |     }
590 |   }
591 |   .info {
592 |     .avatar {
593 |       margin: 45px 0 20px;
594 |       font-size: 16px;
595 |       font-weight: 700;
596 |       img {
597 |         width: 40px;
598 |         height: 40px;
599 |         border-radius: 50%;
600 |         margin-right: 15px;
601 |         vertical-align: middle;
602 |       }
603 |     }
604 |     .list {
605 |       color: #787878;
606 |       line-height: 26px;
607 |       font-size: 14px;
608 |     }
609 |   }
610 | }
611 | </style>
612 | 


--------------------------------------------------------------------------------
/lib/vue-waterfall-adaptive.js:
--------------------------------------------------------------------------------
1 | !function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define("vueWaterfallAdaptive",[],n):"object"==typeof exports?exports.vueWaterfallAdaptive=n():t.vueWaterfallAdaptive=n()}(window,function(){return function(t){var n={};function e(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,e),i.l=!0,i.exports}return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:r})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,n){if(1&n&&(t=e(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(e.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var i in t)e.d(r,i,function(n){return t[n]}.bind(null,i));return r},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},e.p="/",e(e.s=97)}([function(t,n){var e=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=e)},function(t,n,e){var r=e(34)("wks"),i=e(35),o=e(0).Symbol,a="function"==typeof o;(t.exports=function(t){return r[t]||(r[t]=a&&o[t]||(a?o:i)("Symbol."+t))}).store=r},function(t,n){var e=t.exports={version:"2.6.5"};"number"==typeof __e&&(__e=e)},function(t,n,e){var r=e(8);t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},function(t,n,e){var r=e(0),i=e(2),o=e(6),a=e(5),s=e(13),c=function(t,n,e){var u,f,l,d=t&c.F,h=t&c.G,p=t&c.S,v=t&c.P,y=t&c.B,m=t&c.W,g=h?i:i[n]||(i[n]={}),w=g.prototype,x=h?r:p?r[n]:(r[n]||{}).prototype;for(u in h&&(e=n),e)(f=!d&&x&&void 0!==x[u])&&s(g,u)||(l=f?x[u]:e[u],g[u]=h&&"function"!=typeof x[u]?e[u]:y&&f?o(l,r):m&&x[u]==l?function(t){var n=function(n,e,r){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(n);case 2:return new t(n,e)}return new t(n,e,r)}return t.apply(this,arguments)};return n.prototype=t.prototype,n}(l):v&&"function"==typeof l?o(Function.call,l):l,v&&((g.virtual||(g.virtual={}))[u]=l,t&c.R&&w&&!w[u]&&a(w,u,l)))};c.F=1,c.G=2,c.S=4,c.P=8,c.B=16,c.W=32,c.U=64,c.R=128,t.exports=c},function(t,n,e){var r=e(7),i=e(22);t.exports=e(9)?function(t,n,e){return r.f(t,n,i(1,e))}:function(t,n,e){return t[n]=e,t}},function(t,n,e){var r=e(12);t.exports=function(t,n,e){if(r(t),void 0===n)return t;switch(e){case 1:return function(e){return t.call(n,e)};case 2:return function(e,r){return t.call(n,e,r)};case 3:return function(e,r,i){return t.call(n,e,r,i)}}return function(){return t.apply(n,arguments)}}},function(t,n,e){var r=e(3),i=e(56),o=e(57),a=Object.defineProperty;n.f=e(9)?Object.defineProperty:function(t,n,e){if(r(t),n=o(n,!0),r(e),i)try{return a(t,n,e)}catch(t){}if("get"in e||"set"in e)throw TypeError("Accessors not supported!");return"value"in e&&(t[n]=e.value),t}},function(t,n){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,n,e){t.exports=!e(20)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,n){t.exports={}},function(t,n,e){t.exports=e(53)},function(t,n){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,n){var e={}.hasOwnProperty;t.exports=function(t,n){return e.call(t,n)}},function(t,n){var e={}.toString;t.exports=function(t){return e.call(t).slice(8,-1)}},function(t,n,e){var r=e(86);"string"==typeof r&&(r=[[t.i,r,""]]),r.locals&&(t.exports=r.locals);(0,e(49).default)("13252ad1",r,!1,{})},function(t,n,e){var r=e(96);"string"==typeof r&&(r=[[t.i,r,""]]),r.locals&&(t.exports=r.locals);(0,e(49).default)("1abb8174",r,!1,{})},function(t,n){var e=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:e)(t)}},function(t,n){t.exports=function(t){if(null==t)throw TypeError("Can't call method on  "+t);return t}},function(t,n){t.exports=!0},function(t,n){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,n,e){var r=e(8),i=e(0).document,o=r(i)&&r(i.createElement);t.exports=function(t){return o?i.createElement(t):{}}},function(t,n){t.exports=function(t,n){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:n}}},function(t,n,e){var r=e(33),i=e(18);t.exports=function(t){return r(i(t))}},function(t,n,e){var r=e(17),i=Math.min;t.exports=function(t){return t>0?i(r(t),9007199254740991):0}},function(t,n,e){var r=e(34)("keys"),i=e(35);t.exports=function(t){return r[t]||(r[t]=i(t))}},function(t,n,e){var r=e(7).f,i=e(13),o=e(1)("toStringTag");t.exports=function(t,n,e){t&&!i(t=e?t:t.prototype,o)&&r(t,o,{configurable:!0,value:n})}},function(t,n,e){var r=e(18);t.exports=function(t){return Object(r(t))}},function(t,n,e){"use strict";var r=e(12);function i(t){var n,e;this.promise=new t(function(t,r){if(void 0!==n||void 0!==e)throw TypeError("Bad Promise constructor");n=t,e=r}),this.resolve=r(n),this.reject=r(e)}t.exports.f=function(t){return new i(t)}},function(t,n,e){var r=e(48),i=e(90),o=e(94),a="Expected a function",s=Math.max,c=Math.min;t.exports=function(t,n,e){var u,f,l,d,h,p,v=0,y=!1,m=!1,g=!0;if("function"!=typeof t)throw new TypeError(a);function w(n){var e=u,r=f;return u=f=void 0,v=n,d=t.apply(r,e)}function x(t){var e=t-p;return void 0===p||e>=n||e<0||m&&t-v>=l}function _(){var t=i();if(x(t))return b(t);h=setTimeout(_,function(t){var e=n-(t-p);return m?c(e,l-(t-v)):e}(t))}function b(t){return h=void 0,g&&u?w(t):(u=f=void 0,d)}function S(){var t=i(),e=x(t);if(u=arguments,f=this,p=t,e){if(void 0===h)return function(t){return v=t,h=setTimeout(_,n),y?w(t):d}(p);if(m)return clearTimeout(h),h=setTimeout(_,n),w(p)}return void 0===h&&(h=setTimeout(_,n)),d}return n=o(n)||0,r(e)&&(y=!!e.leading,l=(m="maxWait"in e)?s(o(e.maxWait)||0,n):l,g="trailing"in e?!!e.trailing:g),S.cancel=function(){void 0!==h&&clearTimeout(h),v=0,u=p=f=h=void 0},S.flush=function(){return void 0===h?d:b(i())},S}},function(t,n,e){"use strict";var r=e(55)(!0);e(31)(String,"String",function(t){this._t=String(t),this._i=0},function(){var t,n=this._t,e=this._i;return e>=n.length?{value:void 0,done:!0}:(t=r(n,e),this._i+=t.length,{value:t,done:!1})})},function(t,n,e){"use strict";var r=e(19),i=e(4),o=e(58),a=e(5),s=e(10),c=e(59),u=e(26),f=e(65),l=e(1)("iterator"),d=!([].keys&&"next"in[].keys()),h=function(){return this};t.exports=function(t,n,e,p,v,y,m){c(e,n,p);var g,w,x,_=function(t){if(!d&&t in O)return O[t];switch(t){case"keys":case"values":return function(){return new e(this,t)}}return function(){return new e(this,t)}},b=n+" Iterator",S="values"==v,j=!1,O=t.prototype,T=O[l]||O["@@iterator"]||v&&O[v],E=T||_(v),C=v?S?_("entries"):E:void 0,L="Array"==n&&O.entries||T;if(L&&(x=f(L.call(new t)))!==Object.prototype&&x.next&&(u(x,b,!0),r||"function"==typeof x[l]||a(x,l,h)),S&&T&&"values"!==T.name&&(j=!0,E=function(){return T.call(this)}),r&&!m||!d&&!j&&O[l]||a(O,l,E),s[n]=E,s[b]=h,v)if(g={values:S?E:_("values"),keys:y?E:_("keys"),entries:C},m)for(w in g)w in O||o(O,w,g[w]);else i(i.P+i.F*(d||j),n,g);return g}},function(t,n,e){var r=e(62),i=e(36);t.exports=Object.keys||function(t){return r(t,i)}},function(t,n,e){var r=e(14);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},function(t,n,e){var r=e(2),i=e(0),o=i["__core-js_shared__"]||(i["__core-js_shared__"]={});(t.exports=function(t,n){return o[t]||(o[t]=void 0!==n?n:{})})("versions",[]).push({version:r.version,mode:e(19)?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},function(t,n){var e=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++e+r).toString(36))}},function(t,n){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,n,e){var r=e(0).document;t.exports=r&&r.documentElement},function(t,n,e){var r=e(14),i=e(1)("toStringTag"),o="Arguments"==r(function(){return arguments}());t.exports=function(t){var n,e,a;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(e=function(t,n){try{return t[n]}catch(t){}}(n=Object(t),i))?e:o?r(n):"Object"==(a=r(n))&&"function"==typeof n.callee?"Arguments":a}},function(t,n,e){var r=e(3);t.exports=function(t,n,e,i){try{return i?n(r(e)[0],e[1]):n(e)}catch(n){var o=t.return;throw void 0!==o&&r(o.call(t)),n}}},function(t,n,e){var r=e(10),i=e(1)("iterator"),o=Array.prototype;t.exports=function(t){return void 0!==t&&(r.Array===t||o[i]===t)}},function(t,n,e){var r=e(38),i=e(1)("iterator"),o=e(10);t.exports=e(2).getIteratorMethod=function(t){if(null!=t)return t[i]||t["@@iterator"]||o[r(t)]}},function(t,n,e){var r=e(3),i=e(12),o=e(1)("species");t.exports=function(t,n){var e,a=r(t).constructor;return void 0===a||null==(e=r(a)[o])?n:i(e)}},function(t,n,e){var r,i,o,a=e(6),s=e(73),c=e(37),u=e(21),f=e(0),l=f.process,d=f.setImmediate,h=f.clearImmediate,p=f.MessageChannel,v=f.Dispatch,y=0,m={},g=function(){var t=+this;if(m.hasOwnProperty(t)){var n=m[t];delete m[t],n()}},w=function(t){g.call(t.data)};d&&h||(d=function(t){for(var n=[],e=1;arguments.length>e;)n.push(arguments[e++]);return m[++y]=function(){s("function"==typeof t?t:Function(t),n)},r(y),y},h=function(t){delete m[t]},"process"==e(14)(l)?r=function(t){l.nextTick(a(g,t,1))}:v&&v.now?r=function(t){v.now(a(g,t,1))}:p?(o=(i=new p).port2,i.port1.onmessage=w,r=a(o.postMessage,o,1)):f.addEventListener&&"function"==typeof postMessage&&!f.importScripts?(r=function(t){f.postMessage(t+"","*")},f.addEventListener("message",w,!1)):r="onreadystatechange"in u("script")?function(t){c.appendChild(u("script")).onreadystatechange=function(){c.removeChild(this),g.call(t)}}:function(t){setTimeout(a(g,t,1),0)}),t.exports={set:d,clear:h}},function(t,n){t.exports=function(t){try{return{e:!1,v:t()}}catch(t){return{e:!0,v:t}}}},function(t,n,e){var r=e(3),i=e(8),o=e(28);t.exports=function(t,n){if(r(t),i(n)&&n.constructor===t)return n;var e=o.f(t);return(0,e.resolve)(n),e.promise}},function(t,n,e){var r=e(1)("iterator"),i=!1;try{var o=[7][r]();o.return=function(){i=!0},Array.from(o,function(){throw 2})}catch(t){}t.exports=function(t,n){if(!n&&!i)return!1;var e=!1;try{var o=[7],a=o[r]();a.next=function(){return{done:e=!0}},o[r]=function(){return a},t(o)}catch(t){}return e}},function(t,n,e){"use strict";t.exports=function(t){var n=[];return n.toString=function(){return this.map(function(n){var e=function(t,n){var e=t[1]||"",r=t[3];if(!r)return e;if(n&&"function"==typeof btoa){var i=(a=r,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),o=r.sources.map(function(t){return"/*# sourceURL="+r.sourceRoot+t+" */"});return[e].concat(o).concat([i]).join("\n")}var a;return[e].join("\n")}(n,t);return n[2]?"@media "+n[2]+"{"+e+"}":e}).join("")},n.i=function(t,e){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},i=0;i<this.length;i++){var o=this[i][0];null!=o&&(r[o]=!0)}for(i=0;i<t.length;i++){var a=t[i];null!=a[0]&&r[a[0]]||(e&&!a[2]?a[2]=e:e&&(a[2]="("+a[2]+") and ("+e+")"),n.push(a))}},n}},function(t,n){t.exports=function(t){var n=typeof t;return null!=t&&("object"==n||"function"==n)}},function(t,n,e){"use strict";function r(t,n){for(var e=[],r={},i=0;i<n.length;i++){var o=n[i],a=o[0],s={id:t+":"+i,css:o[1],media:o[2],sourceMap:o[3]};r[a]?r[a].parts.push(s):e.push(r[a]={id:a,parts:[s]})}return e}e.r(n),e.d(n,"default",function(){return p});var i="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!i)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var o={},a=i&&(document.head||document.getElementsByTagName("head")[0]),s=null,c=0,u=!1,f=function(){},l=null,d="data-vue-ssr-id",h="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function p(t,n,e,i){u=e,l=i||{};var a=r(t,n);return v(a),function(n){for(var e=[],i=0;i<a.length;i++){var s=a[i];(c=o[s.id]).refs--,e.push(c)}n?v(a=r(t,n)):a=[];for(i=0;i<e.length;i++){var c;if(0===(c=e[i]).refs){for(var u=0;u<c.parts.length;u++)c.parts[u]();delete o[c.id]}}}}function v(t){for(var n=0;n<t.length;n++){var e=t[n],r=o[e.id];if(r){r.refs++;for(var i=0;i<r.parts.length;i++)r.parts[i](e.parts[i]);for(;i<e.parts.length;i++)r.parts.push(m(e.parts[i]));r.parts.length>e.parts.length&&(r.parts.length=e.parts.length)}else{var a=[];for(i=0;i<e.parts.length;i++)a.push(m(e.parts[i]));o[e.id]={id:e.id,refs:1,parts:a}}}}function y(){var t=document.createElement("style");return t.type="text/css",a.appendChild(t),t}function m(t){var n,e,r=document.querySelector("style["+d+'~="'+t.id+'"]');if(r){if(u)return f;r.parentNode.removeChild(r)}if(h){var i=c++;r=s||(s=y()),n=x.bind(null,r,i,!1),e=x.bind(null,r,i,!0)}else r=y(),n=function(t,n){var e=n.css,r=n.media,i=n.sourceMap;r&&t.setAttribute("media",r);l.ssrId&&t.setAttribute(d,n.id);i&&(e+="\n/*# sourceURL="+i.sources[0]+" */",e+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */");if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}.bind(null,r),e=function(){r.parentNode.removeChild(r)};return n(t),function(r){if(r){if(r.css===t.css&&r.media===t.media&&r.sourceMap===t.sourceMap)return;n(t=r)}else e()}}var g,w=(g=[],function(t,n){return g[t]=n,g.filter(Boolean).join("\n")});function x(t,n,e,r){var i=e?"":r.css;if(t.styleSheet)t.styleSheet.cssText=w(n,i);else{var o=document.createTextNode(i),a=t.childNodes;a[n]&&t.removeChild(a[n]),a.length?t.insertBefore(o,a[n]):t.appendChild(o)}}},function(t,n,e){t.exports=e(80)},function(t,n,e){t.exports=e(87)},function(t,n,e){var r=e(29),i=e(48),o="Expected a function";t.exports=function(t,n,e){var a=!0,s=!0;if("function"!=typeof t)throw new TypeError(o);return i(e)&&(a="leading"in e?!!e.leading:a,s="trailing"in e?!!e.trailing:s),r(t,n,{leading:a,maxWait:n,trailing:s})}},function(t,n,e){e(54),e(30),e(66),e(70),e(78),e(79),t.exports=e(2).Promise},function(t,n){},function(t,n,e){var r=e(17),i=e(18);t.exports=function(t){return function(n,e){var o,a,s=String(i(n)),c=r(e),u=s.length;return c<0||c>=u?t?"":void 0:(o=s.charCodeAt(c))<55296||o>56319||c+1===u||(a=s.charCodeAt(c+1))<56320||a>57343?t?s.charAt(c):o:t?s.slice(c,c+2):a-56320+(o-55296<<10)+65536}}},function(t,n,e){t.exports=!e(9)&&!e(20)(function(){return 7!=Object.defineProperty(e(21)("div"),"a",{get:function(){return 7}}).a})},function(t,n,e){var r=e(8);t.exports=function(t,n){if(!r(t))return t;var e,i;if(n&&"function"==typeof(e=t.toString)&&!r(i=e.call(t)))return i;if("function"==typeof(e=t.valueOf)&&!r(i=e.call(t)))return i;if(!n&&"function"==typeof(e=t.toString)&&!r(i=e.call(t)))return i;throw TypeError("Can't convert object to primitive value")}},function(t,n,e){t.exports=e(5)},function(t,n,e){"use strict";var r=e(60),i=e(22),o=e(26),a={};e(5)(a,e(1)("iterator"),function(){return this}),t.exports=function(t,n,e){t.prototype=r(a,{next:i(1,e)}),o(t,n+" Iterator")}},function(t,n,e){var r=e(3),i=e(61),o=e(36),a=e(25)("IE_PROTO"),s=function(){},c=function(){var t,n=e(21)("iframe"),r=o.length;for(n.style.display="none",e(37).appendChild(n),n.src="javascript:",(t=n.contentWindow.document).open(),t.write("<script>document.F=Object<\/script>"),t.close(),c=t.F;r--;)delete c.prototype[o[r]];return c()};t.exports=Object.create||function(t,n){var e;return null!==t?(s.prototype=r(t),e=new s,s.prototype=null,e[a]=t):e=c(),void 0===n?e:i(e,n)}},function(t,n,e){var r=e(7),i=e(3),o=e(32);t.exports=e(9)?Object.defineProperties:function(t,n){i(t);for(var e,a=o(n),s=a.length,c=0;s>c;)r.f(t,e=a[c++],n[e]);return t}},function(t,n,e){var r=e(13),i=e(23),o=e(63)(!1),a=e(25)("IE_PROTO");t.exports=function(t,n){var e,s=i(t),c=0,u=[];for(e in s)e!=a&&r(s,e)&&u.push(e);for(;n.length>c;)r(s,e=n[c++])&&(~o(u,e)||u.push(e));return u}},function(t,n,e){var r=e(23),i=e(24),o=e(64);t.exports=function(t){return function(n,e,a){var s,c=r(n),u=i(c.length),f=o(a,u);if(t&&e!=e){for(;u>f;)if((s=c[f++])!=s)return!0}else for(;u>f;f++)if((t||f in c)&&c[f]===e)return t||f||0;return!t&&-1}}},function(t,n,e){var r=e(17),i=Math.max,o=Math.min;t.exports=function(t,n){return(t=r(t))<0?i(t+n,0):o(t,n)}},function(t,n,e){var r=e(13),i=e(27),o=e(25)("IE_PROTO"),a=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=i(t),r(t,o)?t[o]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?a:null}},function(t,n,e){e(67);for(var r=e(0),i=e(5),o=e(10),a=e(1)("toStringTag"),s="CSSRuleList,CSSStyleDeclaration,CSSValueList,ClientRectList,DOMRectList,DOMStringList,DOMTokenList,DataTransferItemList,FileList,HTMLAllCollection,HTMLCollection,HTMLFormElement,HTMLSelectElement,MediaList,MimeTypeArray,NamedNodeMap,NodeList,PaintRequestList,Plugin,PluginArray,SVGLengthList,SVGNumberList,SVGPathSegList,SVGPointList,SVGStringList,SVGTransformList,SourceBufferList,StyleSheetList,TextTrackCueList,TextTrackList,TouchList".split(","),c=0;c<s.length;c++){var u=s[c],f=r[u],l=f&&f.prototype;l&&!l[a]&&i(l,a,u),o[u]=o.Array}},function(t,n,e){"use strict";var r=e(68),i=e(69),o=e(10),a=e(23);t.exports=e(31)(Array,"Array",function(t,n){this._t=a(t),this._i=0,this._k=n},function(){var t=this._t,n=this._k,e=this._i++;return!t||e>=t.length?(this._t=void 0,i(1)):i(0,"keys"==n?e:"values"==n?t[e]:[e,t[e]])},"values"),o.Arguments=o.Array,r("keys"),r("values"),r("entries")},function(t,n){t.exports=function(){}},function(t,n){t.exports=function(t,n){return{value:n,done:!!t}}},function(t,n,e){"use strict";var r,i,o,a,s=e(19),c=e(0),u=e(6),f=e(38),l=e(4),d=e(8),h=e(12),p=e(71),v=e(72),y=e(42),m=e(43).set,g=e(74)(),w=e(28),x=e(44),_=e(75),b=e(45),S=c.TypeError,j=c.process,O=j&&j.versions,T=O&&O.v8||"",E=c.Promise,C="process"==f(j),L=function(){},P=i=w.f,M=!!function(){try{var t=E.resolve(1),n=(t.constructor={})[e(1)("species")]=function(t){t(L,L)};return(C||"function"==typeof PromiseRejectionEvent)&&t.then(L)instanceof n&&0!==T.indexOf("6.6")&&-1===_.indexOf("Chrome/66")}catch(t){}}(),F=function(t){var n;return!(!d(t)||"function"!=typeof(n=t.then))&&n},N=function(t,n){if(!t._n){t._n=!0;var e=t._c;g(function(){for(var r=t._v,i=1==t._s,o=0,a=function(n){var e,o,a,s=i?n.ok:n.fail,c=n.resolve,u=n.reject,f=n.domain;try{s?(i||(2==t._h&&k(t),t._h=1),!0===s?e=r:(f&&f.enter(),e=s(r),f&&(f.exit(),a=!0)),e===n.promise?u(S("Promise-chain cycle")):(o=F(e))?o.call(e,c,u):c(e)):u(r)}catch(t){f&&!a&&f.exit(),u(t)}};e.length>o;)a(e[o++]);t._c=[],t._n=!1,n&&!t._h&&A(t)})}},A=function(t){m.call(c,function(){var n,e,r,i=t._v,o=W(t);if(o&&(n=x(function(){C?j.emit("unhandledRejection",i,t):(e=c.onunhandledrejection)?e({promise:t,reason:i}):(r=c.console)&&r.error&&r.error("Unhandled promise rejection",i)}),t._h=C||W(t)?2:1),t._a=void 0,o&&n.e)throw n.v})},W=function(t){return 1!==t._h&&0===(t._a||t._c).length},k=function(t){m.call(c,function(){var n;C?j.emit("rejectionHandled",t):(n=c.onrejectionhandled)&&n({promise:t,reason:t._v})})},R=function(t){var n=this;n._d||(n._d=!0,(n=n._w||n)._v=t,n._s=2,n._a||(n._a=n._c.slice()),N(n,!0))},B=function(t){var n,e=this;if(!e._d){e._d=!0,e=e._w||e;try{if(e===t)throw S("Promise can't be resolved itself");(n=F(t))?g(function(){var r={_w:e,_d:!1};try{n.call(t,u(B,r,1),u(R,r,1))}catch(t){R.call(r,t)}}):(e._v=t,e._s=1,N(e,!1))}catch(t){R.call({_w:e,_d:!1},t)}}};M||(E=function(t){p(this,E,"Promise","_h"),h(t),r.call(this);try{t(u(B,this,1),u(R,this,1))}catch(t){R.call(this,t)}},(r=function(t){this._c=[],this._a=void 0,this._s=0,this._d=!1,this._v=void 0,this._h=0,this._n=!1}).prototype=e(76)(E.prototype,{then:function(t,n){var e=P(y(this,E));return e.ok="function"!=typeof t||t,e.fail="function"==typeof n&&n,e.domain=C?j.domain:void 0,this._c.push(e),this._a&&this._a.push(e),this._s&&N(this,!1),e.promise},catch:function(t){return this.then(void 0,t)}}),o=function(){var t=new r;this.promise=t,this.resolve=u(B,t,1),this.reject=u(R,t,1)},w.f=P=function(t){return t===E||t===a?new o(t):i(t)}),l(l.G+l.W+l.F*!M,{Promise:E}),e(26)(E,"Promise"),e(77)("Promise"),a=e(2).Promise,l(l.S+l.F*!M,"Promise",{reject:function(t){var n=P(this);return(0,n.reject)(t),n.promise}}),l(l.S+l.F*(s||!M),"Promise",{resolve:function(t){return b(s&&this===a?E:this,t)}}),l(l.S+l.F*!(M&&e(46)(function(t){E.all(t).catch(L)})),"Promise",{all:function(t){var n=this,e=P(n),r=e.resolve,i=e.reject,o=x(function(){var e=[],o=0,a=1;v(t,!1,function(t){var s=o++,c=!1;e.push(void 0),a++,n.resolve(t).then(function(t){c||(c=!0,e[s]=t,--a||r(e))},i)}),--a||r(e)});return o.e&&i(o.v),e.promise},race:function(t){var n=this,e=P(n),r=e.reject,i=x(function(){v(t,!1,function(t){n.resolve(t).then(e.resolve,r)})});return i.e&&r(i.v),e.promise}})},function(t,n){t.exports=function(t,n,e,r){if(!(t instanceof n)||void 0!==r&&r in t)throw TypeError(e+": incorrect invocation!");return t}},function(t,n,e){var r=e(6),i=e(39),o=e(40),a=e(3),s=e(24),c=e(41),u={},f={};(n=t.exports=function(t,n,e,l,d){var h,p,v,y,m=d?function(){return t}:c(t),g=r(e,l,n?2:1),w=0;if("function"!=typeof m)throw TypeError(t+" is not iterable!");if(o(m)){for(h=s(t.length);h>w;w++)if((y=n?g(a(p=t[w])[0],p[1]):g(t[w]))===u||y===f)return y}else for(v=m.call(t);!(p=v.next()).done;)if((y=i(v,g,p.value,n))===u||y===f)return y}).BREAK=u,n.RETURN=f},function(t,n){t.exports=function(t,n,e){var r=void 0===e;switch(n.length){case 0:return r?t():t.call(e);case 1:return r?t(n[0]):t.call(e,n[0]);case 2:return r?t(n[0],n[1]):t.call(e,n[0],n[1]);case 3:return r?t(n[0],n[1],n[2]):t.call(e,n[0],n[1],n[2]);case 4:return r?t(n[0],n[1],n[2],n[3]):t.call(e,n[0],n[1],n[2],n[3])}return t.apply(e,n)}},function(t,n,e){var r=e(0),i=e(43).set,o=r.MutationObserver||r.WebKitMutationObserver,a=r.process,s=r.Promise,c="process"==e(14)(a);t.exports=function(){var t,n,e,u=function(){var r,i;for(c&&(r=a.domain)&&r.exit();t;){i=t.fn,t=t.next;try{i()}catch(r){throw t?e():n=void 0,r}}n=void 0,r&&r.enter()};if(c)e=function(){a.nextTick(u)};else if(!o||r.navigator&&r.navigator.standalone)if(s&&s.resolve){var f=s.resolve(void 0);e=function(){f.then(u)}}else e=function(){i.call(r,u)};else{var l=!0,d=document.createTextNode("");new o(u).observe(d,{characterData:!0}),e=function(){d.data=l=!l}}return function(r){var i={fn:r,next:void 0};n&&(n.next=i),t||(t=i,e()),n=i}}},function(t,n,e){var r=e(0).navigator;t.exports=r&&r.userAgent||""},function(t,n,e){var r=e(5);t.exports=function(t,n,e){for(var i in n)e&&t[i]?t[i]=n[i]:r(t,i,n[i]);return t}},function(t,n,e){"use strict";var r=e(0),i=e(2),o=e(7),a=e(9),s=e(1)("species");t.exports=function(t){var n="function"==typeof i[t]?i[t]:r[t];a&&n&&!n[s]&&o.f(n,s,{configurable:!0,get:function(){return this}})}},function(t,n,e){"use strict";var r=e(4),i=e(2),o=e(0),a=e(42),s=e(45);r(r.P+r.R,"Promise",{finally:function(t){var n=a(this,i.Promise||o.Promise),e="function"==typeof t;return this.then(e?function(e){return s(n,t()).then(function(){return e})}:t,e?function(e){return s(n,t()).then(function(){throw e})}:t)}})},function(t,n,e){"use strict";var r=e(4),i=e(28),o=e(44);r(r.S,"Promise",{try:function(t){var n=i.f(this),e=o(t);return(e.e?n.reject:n.resolve)(e.v),n.promise}})},function(t,n,e){e(81),t.exports=e(2).Object.assign},function(t,n,e){var r=e(4);r(r.S+r.F,"Object",{assign:e(82)})},function(t,n,e){"use strict";var r=e(32),i=e(83),o=e(84),a=e(27),s=e(33),c=Object.assign;t.exports=!c||e(20)(function(){var t={},n={},e=Symbol(),r="abcdefghijklmnopqrst";return t[e]=7,r.split("").forEach(function(t){n[t]=t}),7!=c({},t)[e]||Object.keys(c({},n)).join("")!=r})?function(t,n){for(var e=a(t),c=arguments.length,u=1,f=i.f,l=o.f;c>u;)for(var d,h=s(arguments[u++]),p=f?r(h).concat(f(h)):r(h),v=p.length,y=0;v>y;)l.call(h,d=p[y++])&&(e[d]=h[d]);return e}:c},function(t,n){n.f=Object.getOwnPropertySymbols},function(t,n){n.f={}.propertyIsEnumerable},function(t,n,e){"use strict";var r=e(15);e.n(r).a},function(t,n,e){(t.exports=e(47)(!1)).push([t.i,".waterfall-silde[data-v-b53e7c62] {\n  position: absolute;\n  transition: left 0.5s, top 0.5s;\n  visibility: hidden;\n}\n.show[data-v-b53e7c62] {\n  visibility: visible;\n  animation: show-card-data-v-b53e7c62 0.5s;\n}\n@keyframes show-card-data-v-b53e7c62 {\n0% {\n    transform: translateY(50px);\n}\n100% {\n    transform: translateY(0);\n}\n}\n",""])},function(t,n,e){e(30),e(88),t.exports=e(2).Array.from},function(t,n,e){"use strict";var r=e(6),i=e(4),o=e(27),a=e(39),s=e(40),c=e(24),u=e(89),f=e(41);i(i.S+i.F*!e(46)(function(t){Array.from(t)}),"Array",{from:function(t){var n,e,i,l,d=o(t),h="function"==typeof this?this:Array,p=arguments.length,v=p>1?arguments[1]:void 0,y=void 0!==v,m=0,g=f(d);if(y&&(v=r(v,p>2?arguments[2]:void 0,2)),null==g||h==Array&&s(g))for(e=new h(n=c(d.length));n>m;m++)u(e,m,y?v(d[m],m):d[m]);else for(l=g.call(d),e=new h;!(i=l.next()).done;m++)u(e,m,y?a(l,v,[i.value,m],!0):i.value);return e.length=m,e}})},function(t,n,e){"use strict";var r=e(7),i=e(22);t.exports=function(t,n,e){n in t?r.f(t,n,i(0,e)):t[n]=e}},function(t,n,e){var r=e(91);t.exports=function(){return r.Date.now()}},function(t,n,e){var r=e(92),i="object"==typeof self&&self&&self.Object===Object&&self,o=r||i||Function("return this")();t.exports=o},function(t,n,e){(function(n){var e="object"==typeof n&&n&&n.Object===Object&&n;t.exports=e}).call(this,e(93))},function(t,n){var e;e=function(){return this}();try{e=e||new Function("return this")()}catch(t){"object"==typeof window&&(e=window)}t.exports=e},function(t,n){t.exports=function(t){return t}},function(t,n,e){"use strict";var r=e(16);e.n(r).a},function(t,n,e){(t.exports=e(47)(!1)).push([t.i,".waterfall[data-v-5f0cccc5] {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n}\n.waterfall-loading-show[data-v-5f0cccc5] {\n  padding-bottom: 100px;\n}\n.waterfall-loading-warp[data-v-5f0cccc5] {\n  position: absolute;\n  left: 50%;\n  bottom: 30px;\n  transform: translateX(-50%);\n}\n.waterfall-loading[data-v-5f0cccc5] {\n  width: 30px;\n  height: 30px;\n  box-sizing: border-box;\n  animation: loading-rotate-data-v-5f0cccc5 0.8s linear infinite;\n  animation-timing-function: steps(12);\n  position: relative;\n  display: inline-block;\n}\n.waterfall-loading i[data-v-5f0cccc5] {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n.waterfall-loading i[data-v-5f0cccc5]::before {\n  width: 2px;\n  height: 25%;\n  content: ' ';\n  display: block;\n  margin: 0 auto;\n  border-radius: 40%;\n  background-color: currentColor;\n}\n.finished[data-v-5f0cccc5] {\n  width: 100%;\n  text-align: center;\n  font-size: 14px;\n  color: #969799;\n  line-height: 50px;\n  position: absolute;\n  bottom: 20px;\n}\n@keyframes loading-rotate-data-v-5f0cccc5 {\n0% {\n    transform: rotate(0deg);\n}\n100% {\n    transform: rotate(360deg);\n}\n}\n.waterfall-loading i[data-v-5f0cccc5]:nth-of-type(1) {\n  opacity: 1;\n  transform: rotate(30deg);\n}\n.waterfall-loading i[data-v-5f0cccc5]:nth-of-type(2) {\n  opacity: 0.9375;\n  transform: rotate(60deg);\n}\n.waterfall-loading i[data-v-5f0cccc5]:nth-of-type(3) {\n  opacity: 0.875;\n  transform: rotate(90deg);\n}\n.waterfall-loading i[data-v-5f0cccc5]:nth-of-type(4) {\n  opacity: 0.8125;\n  transform: rotate(120deg);\n}\n.waterfall-loading i[data-v-5f0cccc5]:nth-of-type(5) {\n  opacity: 0.75;\n  transform: rotate(150deg);\n}\n.waterfall-loading i[data-v-5f0cccc5]:nth-of-type(6) {\n  opacity: 0.6875;\n  transform: rotate(180deg);\n}\n.waterfall-loading i[data-v-5f0cccc5]:nth-of-type(7) {\n  opacity: 0.625;\n  transform: rotate(210deg);\n}\n.waterfall-loading i[data-v-5f0cccc5]:nth-of-type(8) {\n  opacity: 0.5625;\n  transform: rotate(240deg);\n}\n.waterfall-loading i[data-v-5f0cccc5]:nth-of-type(9) {\n  opacity: 0.5;\n  transform: rotate(270deg);\n}\n.waterfall-loading i[data-v-5f0cccc5]:nth-of-type(10) {\n  opacity: 0.4375;\n  transform: rotate(300deg);\n}\n.waterfall-loading i[data-v-5f0cccc5]:nth-of-type(11) {\n  opacity: 0.375;\n  transform: rotate(330deg);\n}\n.waterfall-loading i[data-v-5f0cccc5]:nth-of-type(12) {\n  opacity: 0.3125;\n  transform: rotate(360deg);\n}\n",""])},function(t,n,e){"use strict";e.r(n);var r=function(){var t=this.$createElement;return(this._self._c||t)("div",{ref:"waterfallSilde",staticClass:"waterfall-silde",class:{show:this.init},style:this._style},[this._t("default")],2)};r._withStripped=!0;var i=e(11),o=e.n(i),a=e(50),s=e.n(a),c={name:"waterfallSilde",inject:["parent"],props:{imgs:{type:Array,default:()=>[]},prefetch:{type:Boolean,default:!1}},data:()=>({height:0,top:0,left:0,resize:!1,init:!1}),computed:{_style(){let{width:t}=this.parent;if(!this.init)return{width:t+"px"};let n={top:this.top+"px",left:this.left+"px"};return t&&s()(n,{width:t+"px"}),n},hide(){return!this.parent.init}},methods:{notificationParent(){this.parent.allChildren.push(this),this.parent.childrens.push(this)},async getHeight(){try{await this.imgLoad(),this.height=this.$refs.waterfallSilde.offsetHeight}catch(t){console.error(t)}},async imgLoad(){try{return this.prefetch&&this.imgs.length?await o.a.all(this.imgs.map(t=>this.everyImgLoad(t))):o.a.resolve("跳过加载")}catch(t){console.error(t)}},everyImgLoad:t=>new o.a((n,e)=>{let r=new Image;r.src=t,r.onload=(()=>{r=null,n({src:t,status:"图片加载成功"})}),r.onerror=(()=>{r=null,e({src:t,status:"图片加载失败"})})})},mounted(){this.notificationParent()},destroyed(){let t=this.parent.allChildren.indexOf(this);this.parent.allChildren.splice(t,1)}};e(85);function u(t,n,e,r,i,o,a,s){var c,u="function"==typeof t?t.options:t;if(n&&(u.render=n,u.staticRenderFns=e,u._compiled=!0),r&&(u.functional=!0),o&&(u._scopeId="data-v-"+o),a?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},u._ssrRegister=c):i&&(c=s?function(){i.call(this,this.$root.$options.shadowRoot)}:i),c)if(u.functional){u._injectStyles=c;var f=u.render;u.render=function(t,n){return c.call(n),f(t,n)}}else{var l=u.beforeCreate;u.beforeCreate=l?[].concat(l,c):[c]}return{exports:t,options:u}}var f=u(c,r,[],!1,null,"b53e7c62",null);f.options.__file="src/vue-waterfall/waterfall-silde.vue";var l=f.exports,d=function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("div",{ref:"waterfall",staticClass:"waterfall",class:{resize:t.resize,"waterfall-loading-show":t.loading&&!t.mount||t.finished&&t.finishedTxt},style:t.waterfallStyle},[t._t("default"),t._v(" "),t.loading?e("div",{directives:[{name:"show",rawName:"v-show",value:!t.mount,expression:"!mount"}],staticClass:"waterfall-loading-warp"},[t.$slots.loading?t._t("loading"):e("span",{staticClass:"waterfall-loading",style:{color:t.loadingColor}},t._l(12,function(t,n){return e("i",{key:n})}),0)],2):t._e(),t._v(" "),t.finished&&t.finishedTxt?e("div",{staticClass:"finished"},[t._v(t._s(t.finishedTxt))]):t._e()],2)};d._withStripped=!0;var h=e(51),p=e.n(h),v=e(29),y=e.n(v),m=e(52),g=e.n(m);let w=0;var x={name:"waterfall",provide(){return{parent:this}},props:{top:{type:Number,default:0},topInterval:{type:Number,default:20},leftInterval:{type:Number,default:20},width:{type:Number,default:320},loadingColor:{type:String,default:"#969799"},loading:{type:Boolean,default:!1},offset:{type:Number,default:200},finished:{type:Boolean,default:!1},finishedTxt:{type:String,default:"没有更多了~"}},data:()=>({waterfallBoxHeight:0,scrollMinHeight:0,rowNumber:0,initData:null,childrens:[],allChildren:[],slideWidth:0,resize:!1,left:0,mount:!1}),methods:{getLeftValue(){this.left=(this.$refs.waterfall.clientWidth-this.slideWidth*this.rowNumber-(this.rowNumber-1)*this.leftInterval)/2},getRowNumber(){this.rowNumber=Math.floor(this.$refs.waterfall.clientWidth/(this.slideWidth+this.leftInterval))},getSildeWidth(){this.width&&(this.slideWidth=this.width),this.allChildren.length&&(this.slideWidth=this.allChildren[0].$el.offsetWidth)},getInitData(){this.initData=p()({length:this.rowNumber}).map((t,n)=>({top:this.top,left:this.left+(this.slideWidth+this.leftInterval)*n}))},async waterFall(t){if(t.length){for(let n=0;n<t.length;n++)t[n].height||await t[n].getHeight(n);t.forEach(t=>{t.top=this.initData[0].top,t.left=this.initData[0].left,this.initData[0].top+=t.height+this.topInterval,t.init=!0,this.initData.sort((t,n)=>t.top-n.top)}),this.childrens=[],this.waterfallBoxHeight=[...this.initData].pop().top,this.scrollMinHeight=[...this.initData].shift().top,this.mount=!0}},_refreshWaterfall(){innerWidth!==w&&(this.getRowNumber(),this.getInitData(),this.waterFall(this.allChildren))},_initWaterfall(){this.getSildeWidth(),this.getRowNumber(),this.getLeftValue(),this.getInitData()},handleScroll(){let t=this.$refs.waterfall;t&&this.mount&&!this.finished&&document.scrollingElement.scrollTop>t.offsetTop+this.scrollMinHeight-this.offset-innerHeight&&(this.$emit("load"),this.mount=!1)},reset(){this.initData=null,this.waterfallBoxHeight=0,this.scrollMinHeight=0,this.rowNumber=0,this.slideWidth=0,this.resize=!1,this.left=0,this.mount=!1,this.$nextTick(()=>{this._refreshWaterfall()})}},computed:{resizeBindFn(){return y()(this._refreshWaterfall,200)},scrollBindFn(){return g()(this.handleScroll,200)},waterfallStyle(){return{height:this.waterfallBoxHeight+"px"}}},watch:{childrens(t){t.length&&(this.initData||this._initWaterfall(),this.mount=!1,this.waterFall(t))},finished(t){t?window.removeEventListener("scroll",this.scrollBindFn):window.addEventListener("scroll",this.scrollBindFn)}},activated(){window.addEventListener("resize",this.resizeBindFn),window.addEventListener("scroll",this.scrollBindFn),this._refreshWaterfall()},deactivated(){window.removeEventListener("resize",this.resizeBindFn),window.removeEventListener("scroll",this.scrollBindFn)},mounted(){w=innerWidth,window.addEventListener("resize",this.resizeBindFn),window.addEventListener("scroll",this.scrollBindFn)},destroyed(){window.removeEventListener("resize",this.resizeBindFn),window.removeEventListener("scroll",this.scrollBindFn)}},_=(e(95),u(x,d,[],!1,null,"5f0cccc5",null));_.options.__file="src/vue-waterfall/waterfall.vue";var b=_.exports;e.d(n,"install",function(){return S}),e.d(n,"waterfallSilde",function(){return l}),e.d(n,"waterfall",function(){return b});const S=function(t){t.component(b.name,b),t.component(l.name,l)},j={waterfallSilde:l,waterfall:b,install:S};n.default=j}])});


--------------------------------------------------------------------------------