├── .gitignore
├── .babelrc
├── example
    ├── images
    │   ├── pg0.jpg
    │   ├── pg1.jpg
    │   ├── pg2.jpg
    │   ├── pg3.jpg
    │   ├── pg4.jpg
    │   └── pg5.jpg
    ├── index.js
    ├── index.html
    └── Example.vue
├── .travis.yml
├── src
    ├── index.js
    ├── WaterfallItem.vue
    └── Waterfall.vue
├── .eslintrc.js
├── .editorconfig
├── LICENSE
├── webpack.config.js
├── package.json
├── ZH_CN.md
├── webpack.example.js
├── README.md
└── dist
    └── vue2-waterfall.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "env"
4 |   ]
5 | }


--------------------------------------------------------------------------------
/example/images/pg0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PLDaily/vue2-waterfall/HEAD/example/images/pg0.jpg


--------------------------------------------------------------------------------
/example/images/pg1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PLDaily/vue2-waterfall/HEAD/example/images/pg1.jpg


--------------------------------------------------------------------------------
/example/images/pg2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PLDaily/vue2-waterfall/HEAD/example/images/pg2.jpg


--------------------------------------------------------------------------------
/example/images/pg3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PLDaily/vue2-waterfall/HEAD/example/images/pg3.jpg


--------------------------------------------------------------------------------
/example/images/pg4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PLDaily/vue2-waterfall/HEAD/example/images/pg4.jpg


--------------------------------------------------------------------------------
/example/images/pg5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PLDaily/vue2-waterfall/HEAD/example/images/pg5.jpg


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - 'stable'
4 | - 8
5 | branches:
6 |   only:
7 |   - master


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Waterfall from './Waterfall.vue'
2 | import WaterfallItem from './WaterfallItem.vue'
3 | 
4 | export { Waterfall, WaterfallItem }
5 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |     es6: true
 6 |   },
 7 |   extends: "standard",
 8 |   plugins: [
 9 |     'html'
10 |   ],
11 |   rules: {
12 |   }
13 | }


--------------------------------------------------------------------------------
/src/WaterfallItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="Waterfall-item">
 3 |     <slot></slot>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   name: 'WaterfallItem'
 9 | }
10 | </script>
11 | 


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Example from './Example.vue'
 3 | 
 4 | Vue.config.productionTip = false
 5 | 
 6 | /* eslint-disable no-new */
 7 | new Vue({
 8 |   el: '#example',
 9 |   render: h => h(Example)
10 | })
11 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | 
 3 | root = true
 4 | [*]
 5 | charset = utf-8
 6 | end_of_line = lf
 7 | indent_size = 2
 8 | indent_style = space
 9 | insert_final_newline = true
10 | trim_trailing_whitespace = true
11 | insert_final_newline = false
12 | trim_trailing_whitespace = false


--------------------------------------------------------------------------------
/example/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,user-scalable=no,minimum-scale=1,maximum-scale=1" />
 6 |   <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
 7 |   <title>vue2-waterfall</title>
 8 | </head>
 9 | <body>
10 |   <div id="example"></div>
11 | </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 <PENG />
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const path = require('path')
 3 | const CleanWebpackPlugin = require('clean-webpack-plugin')
 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
 5 | const pkg = require('./package.json')
 6 | 
 7 | const banner = `
 8 | ${pkg.description}
 9 | v${pkg.version} ©${new Date().getFullYear()} ${pkg.author}
10 | ${pkg.homepage}
11 | `.trim()
12 | 
13 | function resolve(dir, filename = '') {
14 |   return path.join(__dirname, dir, filename)
15 | }
16 | 
17 | const config = {
18 |   entry: './src/index.js',
19 |   output: {
20 |     path: resolve('dist'),
21 |     publicPath: '/',
22 |     library: 'Vue2Waterfall',
23 |     libraryTarget: 'umd',
24 |     filename: 'vue2-waterfall.js'
25 |   },
26 |   externals: {
27 |     'vue': 'Vue'
28 |   },
29 |   module: {
30 |     rules: [
31 |       {
32 |         enforce: 'pre',
33 |         test: /\.(js|vue)$/,
34 |         use: [{
35 |           loader: 'eslint-loader',
36 |           options: {
37 |             fix: true
38 |           }
39 |         }]
40 |       },
41 |       {
42 |         test: /\.js$/,
43 |         exclude: /node_modules/,
44 |         use: ['babel-loader']
45 |       },
46 |       {
47 |         test: /\.vue$/,
48 |         exclude: /node_modules/,
49 |         loader: 'vue-loader',
50 |         include: [resolve('src')]
51 |       }
52 |     ]
53 |   },
54 |   plugins: [
55 |     new CleanWebpackPlugin([resolve('dist')]),
56 |     new webpack.optimize.UglifyJsPlugin(),
57 |     new webpack.BannerPlugin(banner),
58 |   ]
59 | }
60 | module.exports = config;


--------------------------------------------------------------------------------
/example/Example.vue:
--------------------------------------------------------------------------------
 1 | <style>
 2 | * {
 3 |   padding: 0;
 4 |   margin: 0;
 5 | }
 6 | 
 7 | .item {
 8 |   margin-bottom: 15px;
 9 | }
10 | 
11 | .item img {
12 |   border-radius: 5px;
13 |   display: block;
14 |   width: 100%;
15 | }
16 | 
17 | .loadmore {
18 |   text-align: center;
19 | }
20 | 
21 | </style>
22 | <template>
23 |   <div class="example">
24 |     <Waterfall :options="options">
25 |       <WaterfallItem v-for="(src, index) in dataArr" :key="index" class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
26 |         <img :src="src">
27 |       </WaterfallItem>
28 |     </Waterfall>
29 |     <div class="loadmore" @click="handleClick">LoadMore</div>
30 |   </div>
31 | </template>
32 | <script>
33 | /* eslint no-unused-vars: 0 */
34 | import {Waterfall, WaterfallItem} from '../src'
35 | import pg0 from './images/pg0.jpg'
36 | import pg1 from './images/pg1.jpg'
37 | import pg2 from './images/pg2.jpg'
38 | import pg3 from './images/pg3.jpg'
39 | import pg4 from './images/pg4.jpg'
40 | import pg5 from './images/pg5.jpg'
41 | export default {
42 |   name: 'Example',
43 |   components: {
44 |     Waterfall,
45 |     WaterfallItem
46 |   },
47 |   data () {
48 |     return {
49 |       dataArr: [],
50 |       options: {}
51 |     }
52 |   },
53 |   mounted () {
54 |     this.loadImage()
55 |   },
56 |   methods: {
57 |     loadImage: function () {
58 |       const imgArr = [pg0, pg1, pg2, pg3, pg4, pg5]
59 |       for (let i = 0; i < 10; i++) {
60 |         let num = Math.floor(Math.random() * 6)
61 |         this.dataArr.push(imgArr[num])
62 |       }
63 |     },
64 |     handleClick: function () {
65 |       this.loadImage()
66 |     }
67 |   }
68 | }
69 | </script>
70 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue2-waterfall",
 3 |   "version": "3.0.1",
 4 |   "description": "An AutoHeight Waterfall Component For Vue2",
 5 |   "main": "dist/vue2-waterfall.js",
 6 |   "scripts": {
 7 |     "watch": "webpack --watch",
 8 |     "build": "webpack",
 9 |     "dev": "webpack-dev-server --config webpack.example.js --open"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/PLDaily/vue2-waterfall.git"
14 |   },
15 |   "keywords": [
16 |     "vue",
17 |     "waterfall"
18 |   ],
19 |   "author": "PLDaily <pcd12321@gmail.com>",
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "https://github.com/PLDaily/vue2-waterfall/issues"
23 |   },
24 |   "homepage": "https://github.com/PLDaily/vue2-waterfall#readme",
25 |   "peerDependencies": {
26 |     "vue": ">=2.0.0"
27 |   },
28 |   "dependencies": {
29 |     "imagesloaded": "^4.1.4",
30 |     "masonry-layout": "^4.2.2",
31 |     "vue": "^2.5.13"
32 |   },
33 |   "devDependencies": {
34 |     "babel-cli": "^6.26.0",
35 |     "babel-core": "^6.26.0",
36 |     "babel-loader": "^7.1.2",
37 |     "babel-preset-env": "^1.6.1",
38 |     "clean-webpack-plugin": "^0.1.17",
39 |     "css-loader": "^0.28.7",
40 |     "eslint": "^4.12.1",
41 |     "eslint-config-standard": "^10.2.1",
42 |     "eslint-loader": "^1.9.0",
43 |     "eslint-plugin-html": "^4.0.1",
44 |     "eslint-plugin-import": "^2.8.0",
45 |     "eslint-plugin-node": "^5.2.1",
46 |     "eslint-plugin-promise": "^3.6.0",
47 |     "eslint-plugin-standard": "^3.0.1",
48 |     "extract-text-webpack-plugin": "^3.0.2",
49 |     "file-loader": "^1.1.5",
50 |     "html-webpack-plugin": "^2.30.1",
51 |     "vue-loader": "^13.5.0",
52 |     "vue-template-compiler": "^2.5.9",
53 |     "webpack": "^3.10.0",
54 |     "webpack-dev-server": "^2.9.7"
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/ZH_CN.md:
--------------------------------------------------------------------------------
 1 | # vue2-waterfall
 2 | 
 3 | [![Build Status](https://travis-ci.org/PLDaily/vue2-waterfall.svg?branch=master)](https://travis-ci.org/PLDaily/vue2-waterfall)
 4 | [![npm](https://img.shields.io/npm/v/vue2-waterfall.svg)](https://www.npmjs.com/package/vue2-waterfall)
 5 | [![npm](https://img.shields.io/npm/dt/vue2-waterfall.svg)](https://www.npmjs.com/package/vue2-waterfall)
 6 | [![npm](https://img.shields.io/npm/l/vue2-waterfall.svg)](https://www.npmjs.com/package/vue2-waterfall)
 7 | [![npm](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://github.com/standard/standard)
 8 | 
 9 | ## 概述
10 | > 一个基于vue2的自适应高度瀑布流组件
11 | 
12 | [demo](http://67.218.146.247:8090/)
13 | 
14 | ## 安装
15 | 
16 | ### 安装 vue2-waterfall
17 | 
18 | ```sh
19 | npm install vue2-waterfall
20 | ```
21 | 
22 | ### 加载 vue2-waterfall 模块
23 | 
24 | 支持 ES6 与 commonjs 的加载方式
25 | 
26 | ```js
27 | // ES6
28 | import {Waterfall, WaterfallItem} from 'vue2-waterfall';
29 | 
30 | // commonjs
31 | const Waterfall = require("vue2-waterfall").Waterfall;
32 | const WaterfallItem = require("vue2-waterfall").WaterfallItem;
33 | ```
34 | 也可以在 html 文件中使用 `script` 标签引入脚本，访问全局变量 `Vue2Waterfall`
35 | 
36 | ```js
37 | <script src="dist/vue2-waterfall.js"></script>
38 | ```
39 | 
40 | ## 使用
41 | 
42 | ```html
43 | <Waterfall>
44 |   <WaterfallItem>item1</WaterfallItem>
45 |   <WaterfallItem>item2</WaterfallItem>
46 |   <WaterfallItem>item3</WaterfallItem>
47 |   ...
48 | </Waterfall>
49 | ```
50 | 
51 | ## 选项
52 | 
53 | | 属性             | 描述                                                            | 默认值       | 类型      |
54 | | --------------- | ---------------------------------------------------------------- | ------------ | --------- |
55 | | options         | [masonry](https://masonry.desandro.com/options.html) options     | {}           | Object    |
56 | 
57 | ## LICENSE
58 | 
59 | MIT@[PLDaily](https://github.com/PLDaily)
60 | 


--------------------------------------------------------------------------------
/webpack.example.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const path = require('path')
 3 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
 4 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 5 | 
 6 | function resolve (dir, filename = '') {
 7 |   return path.join(__dirname, dir, filename)
 8 | }
 9 | 
10 | const config = {
11 |   entry: './example/index.js',
12 |   output: {
13 |     path: resolve('dist'),
14 |     publicPath: '/',
15 |     filename: './dist/example.js'
16 |   },
17 |   devtool: 'inline-source-map',
18 |   devServer: {
19 |     contentBase: resolve('example'),
20 |     compress: true,
21 |     hot: true
22 |   },
23 |   module: {
24 |     rules: [
25 |       {
26 |         enforce: 'pre',
27 |         test: /\.(js|vue)$/,
28 |         use: [{
29 |           loader: 'eslint-loader',
30 |           options: {
31 |             fix: true
32 |           }
33 |         }]
34 |       },
35 |       {
36 |         test: /\.js$/,
37 |         exclude: /node_modules/,
38 |         use: ['babel-loader'],
39 |         include: [resolve('src'), resolve('example')]
40 |       },
41 |       {
42 |         test: /\.vue$/,
43 |         exclude: /node_modules/,
44 |         loader: 'vue-loader',
45 |         include: [resolve('src'), resolve('example')],
46 |         options: {
47 |           loaders: {
48 |             css: ExtractTextPlugin.extract({
49 |               use: ['css-loader'],
50 |               fallback: 'vue-style-loader'
51 |             })
52 |           }
53 |         }
54 |       },
55 |       {
56 |         test: /\.(png|jpg|gif|svg)$/,
57 |         use: [{
58 |           loader: 'file-loader'
59 |         }]
60 |       }
61 |     ]
62 |   },
63 |   plugins: [
64 |     new ExtractTextPlugin({
65 |       filename: 'example.css'
66 |     }),
67 |     new webpack.HotModuleReplacementPlugin(),
68 |     new HtmlWebpackPlugin({
69 |       template: resolve('example', 'index.html'),
70 |       filename: 'index.html'
71 |     })
72 |   ]
73 | }
74 | module.exports = config;


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue2-waterfall
 2 | 
 3 | [![Build Status](https://travis-ci.org/PLDaily/vue2-waterfall.svg?branch=master)](https://travis-ci.org/PLDaily/vue2-waterfall)
 4 | [![npm](https://img.shields.io/npm/v/vue2-waterfall.svg)](https://www.npmjs.com/package/vue2-waterfall)
 5 | [![npm](https://img.shields.io/npm/dt/vue2-waterfall.svg)](https://www.npmjs.com/package/vue2-waterfall)
 6 | [![npm](https://img.shields.io/npm/l/vue2-waterfall.svg)](https://www.npmjs.com/package/vue2-waterfall)
 7 | [![npm](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://github.com/standard/standard)
 8 | 
 9 | [访问中文版](https://github.com/PLDaily/vue2-waterfall/blob/3.0/ZH_CN.md)
10 | 
11 | ## Overview
12 | > An AutoHeight Waterfall Component For Vue2
13 | 
14 | [demo](http://67.218.146.247:8090/)
15 | 
16 | ## Install
17 | 
18 | ### Install vue2-waterfall
19 | 
20 | ```sh
21 | npm install vue2-waterfall
22 | ```
23 | 
24 | ### Import vue2-waterfall
25 | 
26 | ES6/commonjs import style is supported.
27 | 
28 | ```js
29 | // ES6
30 | import {Waterfall, WaterfallItem} from 'vue2-waterfall';
31 | 
32 | // commonjs
33 | const Waterfall = require("vue2-waterfall").Waterfall;
34 | const WaterfallItem = require("vue2-waterfall").WaterfallItem;
35 | ```
36 | or link as a `script` in an html file and access global variable `Vue2Waterfall`.
37 | 
38 | ```js
39 | <script src="dist/vue2-waterfall.js"></script>
40 | ```
41 | 
42 | ## Usage
43 | 
44 | ```html
45 | <Waterfall>
46 |   <WaterfallItem>item1</WaterfallItem>
47 |   <WaterfallItem>item2</WaterfallItem>
48 |   <WaterfallItem>item3</WaterfallItem>
49 |   ...
50 | </Waterfall>
51 | ```
52 | 
53 | ## options
54 | 
55 | | Option          | Description                                                      | default     | type      |
56 | | --------------- | ---------------------------------------------------------------- | ----------- | --------- |
57 | | options         | [masonry](https://masonry.desandro.com/options.html) options     | {}          | Object    |
58 | 
59 | ## LICENSE
60 | 
61 | MIT@[PLDaily](https://github.com/PLDaily)
62 | 


--------------------------------------------------------------------------------
/src/Waterfall.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="waterfall" ref="waterfall">
  3 |     <slot></slot>
  4 |   </div>
  5 | </template>
  6 | <script>
  7 | const isBrowser = typeof window !== 'undefined'
  8 | const Masonry = isBrowser ? window.Masonry || require('masonry-layout') : null
  9 | const imagesloaded = isBrowser ? require('imagesloaded') : null
 10 | export default {
 11 |   name: 'Waterfall',
 12 |   props: {
 13 |     options: {
 14 |       type: Object,
 15 |       default: {}
 16 |     }
 17 |   },
 18 |   mounted () {
 19 |     this.initializeMasonry()
 20 |     this.imagesLoaded()
 21 |   },
 22 |   updated () {
 23 |     this.performLayout()
 24 |     this.imagesLoaded()
 25 |   },
 26 |   unmounted () {
 27 |     this.masonry.destroy()
 28 |   },
 29 |   methods: {
 30 |     imagesLoaded: function () {
 31 |       const node = this.$refs.waterfall
 32 |       imagesloaded(
 33 |         node,
 34 |         () => {
 35 |           this.masonry.layout()
 36 |         }
 37 |       )
 38 |     },
 39 |     performLayout: function () {
 40 |       const diff = this.diffDomChildren()
 41 | 
 42 |       if (diff.removed.length > 0) {
 43 |         this.masonry.remove(diff.removed)
 44 |         this.masonry.reloadItems()
 45 |       }
 46 | 
 47 |       if (diff.appended.length > 0) {
 48 |         this.masonry.appended(diff.appended)
 49 |         this.masonry.reloadItems()
 50 |       }
 51 | 
 52 |       if (diff.prepended.length > 0) {
 53 |         this.masonry.prepended(diff.prepended)
 54 |       }
 55 | 
 56 |       if (diff.moved.length > 0) {
 57 |         this.masonry.reloadItems()
 58 |       }
 59 | 
 60 |       this.masonry.layout()
 61 |     },
 62 |     diffDomChildren: function () {
 63 |       const oldChildren = this.domChildren.filter(function (element) {
 64 |         return !!element.parentNode
 65 |       })
 66 | 
 67 |       const newChildren = this.getNewDomChildren()
 68 | 
 69 |       const removed = oldChildren.filter((oldChild) => {
 70 |         return !newChildren.includes(oldChild)
 71 |       })
 72 | 
 73 |       const domDiff = newChildren.filter((newChild) => {
 74 |         return !oldChildren.includes(newChild)
 75 |       })
 76 | 
 77 |       const prepended = domDiff.filter((newChild, index) => {
 78 |         return newChildren[index] === newChild
 79 |       })
 80 | 
 81 |       const appended = domDiff.filter((el) => {
 82 |         return !prepended.includes(el)
 83 |       })
 84 | 
 85 |       let moved = []
 86 | 
 87 |       if (removed.length === 0) {
 88 |         moved = oldChildren.filter(function (child, index) {
 89 |           return index !== newChildren.indexOf(child)
 90 |         })
 91 |       }
 92 | 
 93 |       this.domChildren = newChildren
 94 | 
 95 |       return {
 96 |         old: oldChildren,
 97 |         new: newChildren,
 98 |         removed: removed,
 99 |         appended: appended,
100 |         prepended: prepended,
101 |         moved: moved
102 |       }
103 |     },
104 |     initializeMasonry: function () {
105 |       if (!this.masonry) {
106 |         this.masonry = new Masonry(
107 |           this.$refs.waterfall,
108 |           this.options
109 |         )
110 |         this.domChildren = this.getNewDomChildren()
111 |       }
112 |     },
113 |     getNewDomChildren: function () {
114 |       const node = this.$refs.waterfall
115 |       const children = this.options && this.options.itemSelector ? node.querySelectorAll(this.options.itemSelector) : node.children
116 |       return Array.prototype.slice.call(children)
117 |     }
118 |   }
119 | }
120 | </script>
121 | 


--------------------------------------------------------------------------------
/dist/vue2-waterfall.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * An AutoHeight Waterfall Component For Vue2
 3 |  * v3.0.1 ©2020 PLDaily <pcd12321@gmail.com>
 4 |  * https://github.com/PLDaily/vue2-waterfall#readme
 5 |  */
 6 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Vue2Waterfall=e():t.Vue2Waterfall=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var o=i[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var i={};return e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/",e(e.s=5)}([function(t,e,i){var n,o;!function(r,s){n=s,void 0!==(o="function"==typeof n?n.call(e,i,e,t):n)&&(t.exports=o)}("undefined"!=typeof window&&window,function(){"use strict";function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{};return(i[t]=i[t]||{})[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){i=i.slice(0),e=e||[];for(var n=this._onceEvents&&this._onceEvents[t],o=0;o<i.length;o++){var r=i[o];n&&n[r]&&(this.off(t,r),delete n[r]),r.apply(this,e)}return this}},e.allOff=function(){delete this._events,delete this._onceEvents},t})},function(t,e,i){var n,o;/*!
 7 |  * getSize v2.0.3
 8 |  * measure size of elements
 9 |  * MIT license
10 |  */
11 | !function(r,s){n=s,void 0!==(o="function"==typeof n?n.call(e,i,e,t):n)&&(t.exports=o)}(window,function(){"use strict";function t(t){var e=parseFloat(t);return-1==t.indexOf("%")&&!isNaN(e)&&e}function e(){}function i(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},e=0;e<u;e++){t[h[e]]=0}return t}function n(t){var e=getComputedStyle(t);return e||a("Style returned "+e+". Are you running this code in a hidden iframe on Firefox? See https://bit.ly/getsizebug1"),e}function o(){if(!d){d=!0;var e=document.createElement("div");e.style.width="200px",e.style.padding="1px 2px 3px 4px",e.style.borderStyle="solid",e.style.borderWidth="1px 2px 3px 4px",e.style.boxSizing="border-box";var i=document.body||document.documentElement;i.appendChild(e);var o=n(e);s=200==Math.round(t(o.width)),r.isBoxSizeOuter=s,i.removeChild(e)}}function r(e){if(o(),"string"==typeof e&&(e=document.querySelector(e)),e&&"object"==typeof e&&e.nodeType){var r=n(e);if("none"==r.display)return i();var a={};a.width=e.offsetWidth,a.height=e.offsetHeight;for(var d=a.isBorderBox="border-box"==r.boxSizing,l=0;l<u;l++){var c=h[l],f=r[c],p=parseFloat(f);a[c]=isNaN(p)?0:p}var m=a.paddingLeft+a.paddingRight,g=a.paddingTop+a.paddingBottom,v=a.marginLeft+a.marginRight,y=a.marginTop+a.marginBottom,_=a.borderLeftWidth+a.borderRightWidth,E=a.borderTopWidth+a.borderBottomWidth,b=d&&s,I=t(r.width);!1!==I&&(a.width=I+(b?0:m+_));var x=t(r.height);return!1!==x&&(a.height=x+(b?0:g+E)),a.innerWidth=a.width-(m+_),a.innerHeight=a.height-(g+E),a.outerWidth=a.width+v,a.outerHeight=a.height+y,a}}var s,a="undefined"==typeof console?e:function(t){console.error(t)},h=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"],u=h.length,d=!1;return r})},function(t,e){t.exports=function(t,e,i,n,o,r){var s,a=t=t||{},h=typeof t.default;"object"!==h&&"function"!==h||(s=t,a=t.default);var u="function"==typeof a?a.options:a;e&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0),i&&(u.functional=!0),o&&(u._scopeId=o);var d;if(r?(d=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},u._ssrRegister=d):n&&(d=n),d){var l=u.functional,c=l?u.render:u.beforeCreate;l?(u._injectStyles=d,u.render=function(t,e){return d.call(e),c(t,e)}):u.beforeCreate=c?[].concat(c,d):[d]}return{esModule:s,exports:a,options:u}}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n="undefined"!=typeof window,o=n?window.Masonry||i(7):null,r=n?i(12):null;e.default={name:"Waterfall",props:{options:{type:Object,default:{}}},mounted:function(){this.initializeMasonry(),this.imagesLoaded()},updated:function(){this.performLayout(),this.imagesLoaded()},unmounted:function(){this.masonry.destroy()},methods:{imagesLoaded:function(){var t=this,e=this.$refs.waterfall;r(e,function(){t.masonry.layout()})},performLayout:function(){var t=this.diffDomChildren();t.removed.length>0&&(this.masonry.remove(t.removed),this.masonry.reloadItems()),t.appended.length>0&&(this.masonry.appended(t.appended),this.masonry.reloadItems()),t.prepended.length>0&&this.masonry.prepended(t.prepended),t.moved.length>0&&this.masonry.reloadItems(),this.masonry.layout()},diffDomChildren:function(){var t=this.domChildren.filter(function(t){return!!t.parentNode}),e=this.getNewDomChildren(),i=t.filter(function(t){return!e.includes(t)}),n=e.filter(function(e){return!t.includes(e)}),o=n.filter(function(t,i){return e[i]===t}),r=n.filter(function(t){return!o.includes(t)}),s=[];return 0===i.length&&(s=t.filter(function(t,i){return i!==e.indexOf(t)})),this.domChildren=e,{old:t,new:e,removed:i,appended:r,prepended:o,moved:s}},initializeMasonry:function(){this.masonry||(this.masonry=new o(this.$refs.waterfall,this.options),this.domChildren=this.getNewDomChildren())},getNewDomChildren:function(){var t=this.$refs.waterfall,e=this.options&&this.options.itemSelector?t.querySelectorAll(this.options.itemSelector):t.children;return Array.prototype.slice.call(e)}}}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"WaterfallItem"}},function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0}),e.WaterfallItem=e.Waterfall=void 0;var o=i(6),r=n(o),s=i(14),a=n(s);e.Waterfall=r.default,e.WaterfallItem=a.default},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(3),o=i.n(n);for(var r in n)"default"!==r&&function(t){i.d(e,t,function(){return n[t]})}(r);var s=i(13),a=i(2),h=a(o.a,s.a,!1,null,null,null);h.options.__file="src/Waterfall.vue",e.default=h.exports},function(t,e,i){var n,o,r;/*!
12 |  * Masonry v4.2.2
13 |  * Cascading grid layout library
14 |  * https://masonry.desandro.com
15 |  * MIT License
16 |  * by David DeSandro
17 |  */
18 | !function(s,a){o=[i(8),i(1)],n=a,void 0!==(r="function"==typeof n?n.apply(e,o):n)&&(t.exports=r)}(window,function(t,e){"use strict";var i=t.create("masonry");i.compatOptions.fitWidth="isFitWidth";var n=i.prototype;return n._resetLayout=function(){this.getSize(),this._getMeasurement("columnWidth","outerWidth"),this._getMeasurement("gutter","outerWidth"),this.measureColumns(),this.colYs=[];for(var t=0;t<this.cols;t++)this.colYs.push(0);this.maxY=0,this.horizontalColIndex=0},n.measureColumns=function(){if(this.getContainerWidth(),!this.columnWidth){var t=this.items[0],i=t&&t.element;this.columnWidth=i&&e(i).outerWidth||this.containerWidth}var n=this.columnWidth+=this.gutter,o=this.containerWidth+this.gutter,r=o/n,s=n-o%n,a=s&&s<1?"round":"floor";r=Math[a](r),this.cols=Math.max(r,1)},n.getContainerWidth=function(){var t=this._getOption("fitWidth"),i=t?this.element.parentNode:this.element,n=e(i);this.containerWidth=n&&n.innerWidth},n._getItemLayoutPosition=function(t){t.getSize();var e=t.size.outerWidth%this.columnWidth,i=e&&e<1?"round":"ceil",n=Math[i](t.size.outerWidth/this.columnWidth);n=Math.min(n,this.cols);for(var o=this.options.horizontalOrder?"_getHorizontalColPosition":"_getTopColPosition",r=this[o](n,t),s={x:this.columnWidth*r.col,y:r.y},a=r.y+t.size.outerHeight,h=n+r.col,u=r.col;u<h;u++)this.colYs[u]=a;return s},n._getTopColPosition=function(t){var e=this._getTopColGroup(t),i=Math.min.apply(Math,e);return{col:e.indexOf(i),y:i}},n._getTopColGroup=function(t){if(t<2)return this.colYs;for(var e=[],i=this.cols+1-t,n=0;n<i;n++)e[n]=this._getColGroupY(n,t);return e},n._getColGroupY=function(t,e){if(e<2)return this.colYs[t];var i=this.colYs.slice(t,t+e);return Math.max.apply(Math,i)},n._getHorizontalColPosition=function(t,e){var i=this.horizontalColIndex%this.cols;i=t>1&&i+t>this.cols?0:i;var n=e.size.outerWidth&&e.size.outerHeight;return this.horizontalColIndex=n?i+t:this.horizontalColIndex,{col:i,y:this._getColGroupY(i,t)}},n._manageStamp=function(t){var i=e(t),n=this._getElementOffset(t),o=this._getOption("originLeft"),r=o?n.left:n.right,s=r+i.outerWidth,a=Math.floor(r/this.columnWidth);a=Math.max(0,a);var h=Math.floor(s/this.columnWidth);h-=s%this.columnWidth?0:1,h=Math.min(this.cols-1,h);for(var u=this._getOption("originTop"),d=(u?n.top:n.bottom)+i.outerHeight,l=a;l<=h;l++)this.colYs[l]=Math.max(d,this.colYs[l])},n._getContainerSize=function(){this.maxY=Math.max.apply(Math,this.colYs);var t={height:this.maxY};return this._getOption("fitWidth")&&(t.width=this._getContainerFitWidth()),t},n._getContainerFitWidth=function(){for(var t=0,e=this.cols;--e&&0===this.colYs[e];)t++;return(this.cols-t)*this.columnWidth-this.gutter},n.needsResizeLayout=function(){var t=this.containerWidth;return this.getContainerWidth(),t!=this.containerWidth},i})},function(t,e,i){var n,o;/*!
19 |  * Outlayer v2.1.1
20 |  * the brains and guts of a layout library
21 |  * MIT license
22 |  */
23 | !function(r,s){"use strict";n=[i(0),i(1),i(9),i(11)],void 0!==(o=function(t,e,i,n){return s(r,t,e,i,n)}.apply(e,n))&&(t.exports=o)}(window,function(t,e,i,n,o){"use strict";function r(t,e){var i=n.getQueryElement(t);if(!i)return void(h&&h.error("Bad element for "+this.constructor.namespace+": "+(i||t)));this.element=i,u&&(this.$element=u(this.element)),this.options=n.extend({},this.constructor.defaults),this.option(e);var o=++l;this.element.outlayerGUID=o,c[o]=this,this._create(),this._getOption("initLayout")&&this.layout()}function s(t){function e(){t.apply(this,arguments)}return e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e}function a(t){if("number"==typeof t)return t;var e=t.match(/(^\d*\.?\d*)(\w*)/),i=e&&e[1],n=e&&e[2];return i.length?(i=parseFloat(i))*(p[n]||1):0}var h=t.console,u=t.jQuery,d=function(){},l=0,c={};r.namespace="outlayer",r.Item=o,r.defaults={containerStyle:{position:"relative"},initLayout:!0,originLeft:!0,originTop:!0,resize:!0,resizeContainer:!0,transitionDuration:"0.4s",hiddenStyle:{opacity:0,transform:"scale(0.001)"},visibleStyle:{opacity:1,transform:"scale(1)"}};var f=r.prototype;n.extend(f,e.prototype),f.option=function(t){n.extend(this.options,t)},f._getOption=function(t){var e=this.constructor.compatOptions[t];return e&&void 0!==this.options[e]?this.options[e]:this.options[t]},r.compatOptions={initLayout:"isInitLayout",horizontal:"isHorizontal",layoutInstant:"isLayoutInstant",originLeft:"isOriginLeft",originTop:"isOriginTop",resize:"isResizeBound",resizeContainer:"isResizingContainer"},f._create=function(){this.reloadItems(),this.stamps=[],this.stamp(this.options.stamp),n.extend(this.element.style,this.options.containerStyle),this._getOption("resize")&&this.bindResize()},f.reloadItems=function(){this.items=this._itemize(this.element.children)},f._itemize=function(t){for(var e=this._filterFindItemElements(t),i=this.constructor.Item,n=[],o=0;o<e.length;o++){var r=e[o],s=new i(r,this);n.push(s)}return n},f._filterFindItemElements=function(t){return n.filterFindElements(t,this.options.itemSelector)},f.getItemElements=function(){return this.items.map(function(t){return t.element})},f.layout=function(){this._resetLayout(),this._manageStamps();var t=this._getOption("layoutInstant"),e=void 0!==t?t:!this._isLayoutInited;this.layoutItems(this.items,e),this._isLayoutInited=!0},f._init=f.layout,f._resetLayout=function(){this.getSize()},f.getSize=function(){this.size=i(this.element)},f._getMeasurement=function(t,e){var n,o=this.options[t];o?("string"==typeof o?n=this.element.querySelector(o):o instanceof HTMLElement&&(n=o),this[t]=n?i(n)[e]:o):this[t]=0},f.layoutItems=function(t,e){t=this._getItemsForLayout(t),this._layoutItems(t,e),this._postLayout()},f._getItemsForLayout=function(t){return t.filter(function(t){return!t.isIgnored})},f._layoutItems=function(t,e){if(this._emitCompleteOnItems("layout",t),t&&t.length){var i=[];t.forEach(function(t){var n=this._getItemLayoutPosition(t);n.item=t,n.isInstant=e||t.isLayoutInstant,i.push(n)},this),this._processLayoutQueue(i)}},f._getItemLayoutPosition=function(){return{x:0,y:0}},f._processLayoutQueue=function(t){this.updateStagger(),t.forEach(function(t,e){this._positionItem(t.item,t.x,t.y,t.isInstant,e)},this)},f.updateStagger=function(){var t=this.options.stagger;return null===t||void 0===t?void(this.stagger=0):(this.stagger=a(t),this.stagger)},f._positionItem=function(t,e,i,n,o){n?t.goTo(e,i):(t.stagger(o*this.stagger),t.moveTo(e,i))},f._postLayout=function(){this.resizeContainer()},f.resizeContainer=function(){if(this._getOption("resizeContainer")){var t=this._getContainerSize();t&&(this._setContainerMeasure(t.width,!0),this._setContainerMeasure(t.height,!1))}},f._getContainerSize=d,f._setContainerMeasure=function(t,e){if(void 0!==t){var i=this.size;i.isBorderBox&&(t+=e?i.paddingLeft+i.paddingRight+i.borderLeftWidth+i.borderRightWidth:i.paddingBottom+i.paddingTop+i.borderTopWidth+i.borderBottomWidth),t=Math.max(t,0),this.element.style[e?"width":"height"]=t+"px"}},f._emitCompleteOnItems=function(t,e){function i(){o.dispatchEvent(t+"Complete",null,[e])}function n(){++s==r&&i()}var o=this,r=e.length;if(!e||!r)return void i();var s=0;e.forEach(function(e){e.once(t,n)})},f.dispatchEvent=function(t,e,i){var n=e?[e].concat(i):i;if(this.emitEvent(t,n),u)if(this.$element=this.$element||u(this.element),e){var o=u.Event(e);o.type=t,this.$element.trigger(o,i)}else this.$element.trigger(t,i)},f.ignore=function(t){var e=this.getItem(t);e&&(e.isIgnored=!0)},f.unignore=function(t){var e=this.getItem(t);e&&delete e.isIgnored},f.stamp=function(t){(t=this._find(t))&&(this.stamps=this.stamps.concat(t),t.forEach(this.ignore,this))},f.unstamp=function(t){(t=this._find(t))&&t.forEach(function(t){n.removeFrom(this.stamps,t),this.unignore(t)},this)},f._find=function(t){if(t)return"string"==typeof t&&(t=this.element.querySelectorAll(t)),t=n.makeArray(t)},f._manageStamps=function(){this.stamps&&this.stamps.length&&(this._getBoundingRect(),this.stamps.forEach(this._manageStamp,this))},f._getBoundingRect=function(){var t=this.element.getBoundingClientRect(),e=this.size;this._boundingRect={left:t.left+e.paddingLeft+e.borderLeftWidth,top:t.top+e.paddingTop+e.borderTopWidth,right:t.right-(e.paddingRight+e.borderRightWidth),bottom:t.bottom-(e.paddingBottom+e.borderBottomWidth)}},f._manageStamp=d,f._getElementOffset=function(t){var e=t.getBoundingClientRect(),n=this._boundingRect,o=i(t);return{left:e.left-n.left-o.marginLeft,top:e.top-n.top-o.marginTop,right:n.right-e.right-o.marginRight,bottom:n.bottom-e.bottom-o.marginBottom}},f.handleEvent=n.handleEvent,f.bindResize=function(){t.addEventListener("resize",this),this.isResizeBound=!0},f.unbindResize=function(){t.removeEventListener("resize",this),this.isResizeBound=!1},f.onresize=function(){this.resize()},n.debounceMethod(r,"onresize",100),f.resize=function(){this.isResizeBound&&this.needsResizeLayout()&&this.layout()},f.needsResizeLayout=function(){var t=i(this.element);return this.size&&t&&t.innerWidth!==this.size.innerWidth},f.addItems=function(t){var e=this._itemize(t);return e.length&&(this.items=this.items.concat(e)),e},f.appended=function(t){var e=this.addItems(t);e.length&&(this.layoutItems(e,!0),this.reveal(e))},f.prepended=function(t){var e=this._itemize(t);if(e.length){var i=this.items.slice(0);this.items=e.concat(i),this._resetLayout(),this._manageStamps(),this.layoutItems(e,!0),this.reveal(e),this.layoutItems(i)}},f.reveal=function(t){if(this._emitCompleteOnItems("reveal",t),t&&t.length){var e=this.updateStagger();t.forEach(function(t,i){t.stagger(i*e),t.reveal()})}},f.hide=function(t){if(this._emitCompleteOnItems("hide",t),t&&t.length){var e=this.updateStagger();t.forEach(function(t,i){t.stagger(i*e),t.hide()})}},f.revealItemElements=function(t){var e=this.getItems(t);this.reveal(e)},f.hideItemElements=function(t){var e=this.getItems(t);this.hide(e)},f.getItem=function(t){for(var e=0;e<this.items.length;e++){var i=this.items[e];if(i.element==t)return i}},f.getItems=function(t){t=n.makeArray(t);var e=[];return t.forEach(function(t){var i=this.getItem(t);i&&e.push(i)},this),e},f.remove=function(t){var e=this.getItems(t);this._emitCompleteOnItems("remove",e),e&&e.length&&e.forEach(function(t){t.remove(),n.removeFrom(this.items,t)},this)},f.destroy=function(){var t=this.element.style;t.height="",t.position="",t.width="",this.items.forEach(function(t){t.destroy()}),this.unbindResize();var e=this.element.outlayerGUID;delete c[e],delete this.element.outlayerGUID,u&&u.removeData(this.element,this.constructor.namespace)},r.data=function(t){t=n.getQueryElement(t);var e=t&&t.outlayerGUID;return e&&c[e]},r.create=function(t,e){var i=s(r);return i.defaults=n.extend({},r.defaults),n.extend(i.defaults,e),i.compatOptions=n.extend({},r.compatOptions),i.namespace=t,i.data=r.data,i.Item=s(o),n.htmlInit(i,t),u&&u.bridget&&u.bridget(t,i),i};var p={ms:1,s:1e3};return r.Item=o,r})},function(t,e,i){var n,o;!function(r,s){n=[i(10)],void 0!==(o=function(t){return s(r,t)}.apply(e,n))&&(t.exports=o)}(window,function(t,e){"use strict";var i={};i.extend=function(t,e){for(var i in e)t[i]=e[i];return t},i.modulo=function(t,e){return(t%e+e)%e};var n=Array.prototype.slice;i.makeArray=function(t){return Array.isArray(t)?t:null===t||void 0===t?[]:"object"==typeof t&&"number"==typeof t.length?n.call(t):[t]},i.removeFrom=function(t,e){var i=t.indexOf(e);-1!=i&&t.splice(i,1)},i.getParent=function(t,i){for(;t.parentNode&&t!=document.body;)if(t=t.parentNode,e(t,i))return t},i.getQueryElement=function(t){return"string"==typeof t?document.querySelector(t):t},i.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},i.filterFindElements=function(t,n){t=i.makeArray(t);var o=[];return t.forEach(function(t){if(t instanceof HTMLElement){if(!n)return void o.push(t);e(t,n)&&o.push(t);for(var i=t.querySelectorAll(n),r=0;r<i.length;r++)o.push(i[r])}}),o},i.debounceMethod=function(t,e,i){i=i||100;var n=t.prototype[e],o=e+"Timeout";t.prototype[e]=function(){var t=this[o];clearTimeout(t);var e=arguments,r=this;this[o]=setTimeout(function(){n.apply(r,e),delete r[o]},i)}},i.docReady=function(t){var e=document.readyState;"complete"==e||"interactive"==e?setTimeout(t):document.addEventListener("DOMContentLoaded",t)},i.toDashed=function(t){return t.replace(/(.)([A-Z])/g,function(t,e,i){return e+"-"+i}).toLowerCase()};var o=t.console;return i.htmlInit=function(e,n){i.docReady(function(){var r=i.toDashed(n),s="data-"+r,a=document.querySelectorAll("["+s+"]"),h=document.querySelectorAll(".js-"+r),u=i.makeArray(a).concat(i.makeArray(h)),d=s+"-options",l=t.jQuery;u.forEach(function(t){var i,r=t.getAttribute(s)||t.getAttribute(d);try{i=r&&JSON.parse(r)}catch(e){return void(o&&o.error("Error parsing "+s+" on "+t.className+": "+e))}var a=new e(t,i);l&&l.data(t,n,a)})})},i})},function(t,e,i){var n,o;!function(r,s){"use strict";n=s,void 0!==(o="function"==typeof n?n.call(e,i,e,t):n)&&(t.exports=o)}(window,function(){"use strict";var t=function(){var t=window.Element.prototype;if(t.matches)return"matches";if(t.matchesSelector)return"matchesSelector";for(var e=["webkit","moz","ms","o"],i=0;i<e.length;i++){var n=e[i],o=n+"MatchesSelector";if(t[o])return o}}();return function(e,i){return e[t](i)}})},function(t,e,i){var n,o,r;!function(s,a){o=[i(0),i(1)],n=a,void 0!==(r="function"==typeof n?n.apply(e,o):n)&&(t.exports=r)}(window,function(t,e){"use strict";function i(t){for(var e in t)return!1;return null,!0}function n(t,e){t&&(this.element=t,this.layout=e,this.position={x:0,y:0},this._create())}var o=document.documentElement.style,r="string"==typeof o.transition?"transition":"WebkitTransition",s="string"==typeof o.transform?"transform":"WebkitTransform",a={WebkitTransition:"webkitTransitionEnd",transition:"transitionend"}[r],h={transform:s,transition:r,transitionDuration:r+"Duration",transitionProperty:r+"Property",transitionDelay:r+"Delay"},u=n.prototype=Object.create(t.prototype);u.constructor=n,u._create=function(){this._transn={ingProperties:{},clean:{},onEnd:{}},this.css({position:"absolute"})},u.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},u.getSize=function(){this.size=e(this.element)},u.css=function(t){var e=this.element.style;for(var i in t){e[h[i]||i]=t[i]}},u.getPosition=function(){var t=getComputedStyle(this.element),e=this.layout._getOption("originLeft"),i=this.layout._getOption("originTop"),n=t[e?"left":"right"],o=t[i?"top":"bottom"],r=parseFloat(n),s=parseFloat(o),a=this.layout.size;-1!=n.indexOf("%")&&(r=r/100*a.width),-1!=o.indexOf("%")&&(s=s/100*a.height),r=isNaN(r)?0:r,s=isNaN(s)?0:s,r-=e?a.paddingLeft:a.paddingRight,s-=i?a.paddingTop:a.paddingBottom,this.position.x=r,this.position.y=s},u.layoutPosition=function(){var t=this.layout.size,e={},i=this.layout._getOption("originLeft"),n=this.layout._getOption("originTop"),o=i?"paddingLeft":"paddingRight",r=i?"left":"right",s=i?"right":"left",a=this.position.x+t[o];e[r]=this.getXValue(a),e[s]="";var h=n?"paddingTop":"paddingBottom",u=n?"top":"bottom",d=n?"bottom":"top",l=this.position.y+t[h];e[u]=this.getYValue(l),e[d]="",this.css(e),this.emitEvent("layout",[this])},u.getXValue=function(t){var e=this.layout._getOption("horizontal");return this.layout.options.percentPosition&&!e?t/this.layout.size.width*100+"%":t+"px"},u.getYValue=function(t){var e=this.layout._getOption("horizontal");return this.layout.options.percentPosition&&e?t/this.layout.size.height*100+"%":t+"px"},u._transitionTo=function(t,e){this.getPosition();var i=this.position.x,n=this.position.y,o=t==this.position.x&&e==this.position.y;if(this.setPosition(t,e),o&&!this.isTransitioning)return void this.layoutPosition();var r=t-i,s=e-n,a={};a.transform=this.getTranslate(r,s),this.transition({to:a,onTransitionEnd:{transform:this.layoutPosition},isCleaning:!0})},u.getTranslate=function(t,e){var i=this.layout._getOption("originLeft"),n=this.layout._getOption("originTop");return t=i?t:-t,e=n?e:-e,"translate3d("+t+"px, "+e+"px, 0)"},u.goTo=function(t,e){this.setPosition(t,e),this.layoutPosition()},u.moveTo=u._transitionTo,u.setPosition=function(t,e){this.position.x=parseFloat(t),this.position.y=parseFloat(e)},u._nonTransition=function(t){this.css(t.to),t.isCleaning&&this._removeStyles(t.to);for(var e in t.onTransitionEnd)t.onTransitionEnd[e].call(this)},u.transition=function(t){if(!parseFloat(this.layout.options.transitionDuration))return void this._nonTransition(t);var e=this._transn;for(var i in t.onTransitionEnd)e.onEnd[i]=t.onTransitionEnd[i];for(i in t.to)e.ingProperties[i]=!0,t.isCleaning&&(e.clean[i]=!0);if(t.from){this.css(t.from);this.element.offsetHeight;null}this.enableTransition(t.to),this.css(t.to),this.isTransitioning=!0};var d="opacity,"+function(t){return t.replace(/([A-Z])/g,function(t){return"-"+t.toLowerCase()})}(s);u.enableTransition=function(){if(!this.isTransitioning){var t=this.layout.options.transitionDuration;t="number"==typeof t?t+"ms":t,this.css({transitionProperty:d,transitionDuration:t,transitionDelay:this.staggerDelay||0}),this.element.addEventListener(a,this,!1)}},u.onwebkitTransitionEnd=function(t){this.ontransitionend(t)},u.onotransitionend=function(t){this.ontransitionend(t)};var l={"-webkit-transform":"transform"};u.ontransitionend=function(t){if(t.target===this.element){var e=this._transn,n=l[t.propertyName]||t.propertyName;if(delete e.ingProperties[n],i(e.ingProperties)&&this.disableTransition(),n in e.clean&&(this.element.style[t.propertyName]="",delete e.clean[n]),n in e.onEnd){e.onEnd[n].call(this),delete e.onEnd[n]}this.emitEvent("transitionEnd",[this])}},u.disableTransition=function(){this.removeTransitionStyles(),this.element.removeEventListener(a,this,!1),this.isTransitioning=!1},u._removeStyles=function(t){var e={};for(var i in t)e[i]="";this.css(e)};var c={transitionProperty:"",transitionDuration:"",transitionDelay:""};return u.removeTransitionStyles=function(){this.css(c)},u.stagger=function(t){t=isNaN(t)?0:t,this.staggerDelay=t+"ms"},u.removeElem=function(){this.element.parentNode.removeChild(this.element),this.css({display:""}),this.emitEvent("remove",[this])},u.remove=function(){if(!r||!parseFloat(this.layout.options.transitionDuration))return void this.removeElem();this.once("transitionEnd",function(){this.removeElem()}),this.hide()},u.reveal=function(){delete this.isHidden,this.css({display:""});var t=this.layout.options,e={};e[this.getHideRevealTransitionEndProperty("visibleStyle")]=this.onRevealTransitionEnd,this.transition({from:t.hiddenStyle,to:t.visibleStyle,isCleaning:!0,onTransitionEnd:e})},u.onRevealTransitionEnd=function(){this.isHidden||this.emitEvent("reveal")},u.getHideRevealTransitionEndProperty=function(t){var e=this.layout.options[t];if(e.opacity)return"opacity";for(var i in e)return i},u.hide=function(){this.isHidden=!0,this.css({display:""});var t=this.layout.options,e={};e[this.getHideRevealTransitionEndProperty("hiddenStyle")]=this.onHideTransitionEnd,this.transition({from:t.visibleStyle,to:t.hiddenStyle,isCleaning:!0,onTransitionEnd:e})},u.onHideTransitionEnd=function(){this.isHidden&&(this.css({display:"none"}),this.emitEvent("hide"))},u.destroy=function(){this.css({position:"",left:"",right:"",top:"",bottom:"",transition:"",transform:""})},n})},function(t,e,i){var n,o;/*!
24 |  * imagesLoaded v4.1.4
25 |  * JavaScript is all like "You images are done yet or what?"
26 |  * MIT License
27 |  */
28 | !function(r,s){"use strict";n=[i(0)],void 0!==(o=function(t){return s(r,t)}.apply(e,n))&&(t.exports=o)}("undefined"!=typeof window?window:this,function(t,e){"use strict";function i(t,e){for(var i in e)t[i]=e[i];return t}function n(t){return Array.isArray(t)?t:"object"==typeof t&&"number"==typeof t.length?u.call(t):[t]}function o(t,e,r){if(!(this instanceof o))return new o(t,e,r);var s=t;if("string"==typeof t&&(s=document.querySelectorAll(t)),!s)return void h.error("Bad element for imagesLoaded "+(s||t));this.elements=n(s),this.options=i({},this.options),"function"==typeof e?r=e:i(this.options,e),r&&this.on("always",r),this.getImages(),a&&(this.jqDeferred=new a.Deferred),setTimeout(this.check.bind(this))}function r(t){this.img=t}function s(t,e){this.url=t,this.element=e,this.img=new Image}var a=t.jQuery,h=t.console,u=Array.prototype.slice;o.prototype=Object.create(e.prototype),o.prototype.options={},o.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)},o.prototype.addElementImages=function(t){"IMG"==t.nodeName&&this.addImage(t),!0===this.options.background&&this.addElementBackgroundImages(t);var e=t.nodeType;if(e&&d[e]){for(var i=t.querySelectorAll("img"),n=0;n<i.length;n++){var o=i[n];this.addImage(o)}if("string"==typeof this.options.background){var r=t.querySelectorAll(this.options.background);for(n=0;n<r.length;n++){var s=r[n];this.addElementBackgroundImages(s)}}}};var d={1:!0,9:!0,11:!0};return o.prototype.addElementBackgroundImages=function(t){var e=getComputedStyle(t);if(e)for(var i=/url\((['"])?(.*?)\1\)/gi,n=i.exec(e.backgroundImage);null!==n;){var o=n&&n[2];o&&this.addBackground(o,t),n=i.exec(e.backgroundImage)}},o.prototype.addImage=function(t){var e=new r(t);this.images.push(e)},o.prototype.addBackground=function(t,e){var i=new s(t,e);this.images.push(i)},o.prototype.check=function(){function t(t,i,n){setTimeout(function(){e.progress(t,i,n)})}var e=this;if(this.progressedCount=0,this.hasAnyBroken=!1,!this.images.length)return void this.complete();this.images.forEach(function(e){e.once("progress",t),e.check()})},o.prototype.progress=function(t,e,i){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!t.isLoaded,this.emitEvent("progress",[this,t,e]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,t),this.progressedCount==this.images.length&&this.complete(),this.options.debug&&h&&h.log("progress: "+i,t,e)},o.prototype.complete=function(){var t=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(t,[this]),this.emitEvent("always",[this]),this.jqDeferred){var e=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[e](this)}},r.prototype=Object.create(e.prototype),r.prototype.check=function(){if(this.getIsImageComplete())return void this.confirm(0!==this.img.naturalWidth,"naturalWidth");this.proxyImage=new Image,this.proxyImage.addEventListener("load",this),this.proxyImage.addEventListener("error",this),this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.proxyImage.src=this.img.src},r.prototype.getIsImageComplete=function(){return this.img.complete&&this.img.naturalWidth},r.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.img,e])},r.prototype.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},r.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},r.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},r.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},s.prototype=Object.create(r.prototype),s.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url,this.getIsImageComplete()&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},s.prototype.unbindEvents=function(){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},s.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.element,e])},o.makeJQueryPlugin=function(e){(e=e||t.jQuery)&&(a=e,a.fn.imagesLoaded=function(t,e){return new o(this,t,e).jqDeferred.promise(a(this))})},o.makeJQueryPlugin(),o})},function(t,e,i){"use strict";var n=function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{ref:"waterfall",staticClass:"waterfall"},[t._t("default")],2)},o=[];n._withStripped=!0;var r={render:n,staticRenderFns:o};e.a=r},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(4),o=i.n(n);for(var r in n)"default"!==r&&function(t){i.d(e,t,function(){return n[t]})}(r);var s=i(15),a=i(2),h=a(o.a,s.a,!1,null,null,null);h.options.__file="src/WaterfallItem.vue",e.default=h.exports},function(t,e,i){"use strict";var n=function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"Waterfall-item"},[t._t("default")],2)},o=[];n._withStripped=!0;var r={render:n,staticRenderFns:o};e.a=r}])});


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