├── .eslintignore
├── .eslintrc.js
├── .gitattributes
├── .github
└── workflows
│ ├── pages-deploy.yml
│ └── publish.yml
├── .gitignore
├── .prettierrc
├── LICENSE
├── README-ZH.md
├── README.md
├── index.html
├── package.json
├── public
└── favicon.ico
├── src
├── App.vue
├── VueFlexWaterfall.vue
├── env.d.ts
├── index.ts
└── main.ts
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist
2 | demo
3 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | env: {
3 | browser: true,
4 | es2021: true,
5 | node: true,
6 | },
7 | extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:vue/vue3-essential'],
8 | parserOptions: {
9 | ecmaVersion: 'latest',
10 | parser: '@typescript-eslint/parser',
11 | sourceType: 'module',
12 | },
13 | plugins: ['vue', '@typescript-eslint'],
14 | rules: {
15 | '@typescript-eslint/no-non-null-assertion': 'off',
16 | '@typescript-eslint/no-explicit-any': 'off',
17 | },
18 | };
19 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/.github/workflows/pages-deploy.yml:
--------------------------------------------------------------------------------
1 | name: Deploy to Pages
2 | on:
3 | push:
4 | branches:
5 | - master
6 | paths:
7 | - "vite.config.ts"
8 | - "src/**"
9 | - ".github/workflows/pages-deploy.yml"
10 | jobs:
11 | build-and-deploy-demo:
12 | runs-on: ubuntu-latest
13 | steps:
14 | - name: Checkout
15 | uses: actions/checkout@v2
16 | with:
17 | ref: master
18 | persist-credentials: false
19 | - name: Install Dependencies
20 | run: yarn install --frozen-lockfile
21 | - name: Lint
22 | run: yarn run lint
23 | - name: Build
24 | run: yarn run build:demo
25 | - name: Deploy
26 | uses: JamesIves/github-pages-deploy-action@v4
27 | with:
28 | branch: gh-pages
29 | folder: demo
30 | single-commit: true
31 |
--------------------------------------------------------------------------------
/.github/workflows/publish.yml:
--------------------------------------------------------------------------------
1 | name: Publish
2 |
3 | on:
4 | push:
5 | branches:
6 | - "!*"
7 | tags:
8 | - "v*"
9 |
10 | jobs:
11 | publish:
12 | runs-on: ubuntu-latest
13 | steps:
14 | - name: Checkout
15 | uses: actions/checkout@v2
16 | - name: Install Dependencies
17 | run: yarn install --frozen-lockfile
18 | - name: Lint
19 | run: yarn run lint
20 | - name: Build
21 | run: yarn build
22 | - name: Publish
23 | uses: JS-DevTools/npm-publish@v1
24 | with:
25 | token: ${{ secrets.NPM_TOKEN }}
26 | - name: Release
27 | uses: marvinpinto/action-automatic-releases@latest
28 | with:
29 | repo_token: ${{ github.token }}
30 | prerelease: false
31 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | dist
4 | demo
5 |
6 | # local env files
7 | .env.local
8 | .env.*.local
9 |
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 |
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 120,
3 | "singleQuote": true,
4 | "trailingComma": "all",
5 | "arrowParens": "avoid",
6 | "useTabs": false,
7 | "tabWidth": 2,
8 | "semi": true,
9 | "overrides": [
10 | {
11 | "files": "*.html",
12 | "options": {
13 | "printWidth": 999
14 | }
15 | }
16 | ]
17 | }
18 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 神代綺凜
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README-ZH.md:
--------------------------------------------------------------------------------
1 | # vue-flex-waterfall
2 |
3 | [](https://www.npmjs.com/package/vue-flex-waterfall)
4 | [](LICENSE)
5 |
6 | 用 flex 实现的横向排序的瀑布流布局 Vue 3 组件
7 |
8 | 原理见 [纯 CSS 实现横向排序的瀑布流式布局](https://jessieji.com/2019/pure-css-masonry)
9 |
10 | > 如果你使用 Vue 2，那么请使用 [v1](https://github.com/Tsuk1ko/vue-flex-waterfall/tree/v1)
11 |
12 | ## Demo
13 |
14 | [Vue Flex Waterfall Demo](https://tsuk1ko.github.io/vue-flex-waterfall/)
15 |
16 | [Demo 源码](src/App.vue)
17 |
18 | ## 安装
19 |
20 | ### 需求
21 |
22 | Vue ^3.0.0
23 |
24 | ### Node
25 |
26 | ```bash
27 | npm i vue-flex-waterfall
28 | ```
29 |
30 | ### 浏览器
31 |
32 | #### UNPKG
33 |
34 | ```html
35 |
36 | ```
37 |
38 | #### jsDelivr
39 |
40 | ```html
41 |
42 | ```
43 |
44 | ## 使用
45 |
46 | ```vue
47 |
48 |
54 |
55 |
56 |
57 |
58 |
61 | ```
62 |
63 | ## 参数
64 |
65 | ### align-content
66 |
67 | 类型：`String`
68 |
69 | 默认值：`undefined`
70 |
71 | 等同于容器的 *align-content* CSS 变量
72 |
73 | [MDN 文档](https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-content)
74 |
75 | ### height
76 |
77 | 类型：`Number | String`
78 |
79 | 默认值：`undefined`
80 |
81 | 你可以手动指定容器高度，当不指定时，会自动计算高度
82 |
83 | 给定一个数字时其单位为 *px*
84 |
85 | ### col
86 |
87 | 类型：`Number | String`
88 |
89 | 默认值：`1`
90 |
91 | 默认列数，使用 `break-at` 参数可以指定不同宽度下的列数
92 |
93 | ### col-spacing
94 |
95 | 类型：`Number | String`
96 |
97 | 默认值：`0`
98 |
99 | 列间距，给定一个数字时其单位为 *px*，请注意其表现与 `align-content` 有关
100 |
101 | ### break-at
102 |
103 | 类型：`Object`
104 |
105 | 默认值：`{}`
106 |
107 | 给定一个对象来指定不同宽度下的列数，例如 `{ 900: 3 }` 则表示当宽度 <= 900px 时将会变为 3 列
108 |
109 | ### break-by-container
110 |
111 | 类型：`Boolean`
112 |
113 | 默认值：`false`
114 |
115 | 为`true`时，`break-at` 将使用瀑布流容器宽度，而不是 window 宽度
116 |
117 | ## 事件
118 |
119 | ### order-updated
120 |
121 | 插槽中元素的 `order` 属性被更新后触发
122 |
123 | ## 方法
124 |
125 | ### updateOrder
126 |
127 | 调用该方法可以手动触发 `order` 更新
128 |
129 | 如何调用组件方法：见 Vue 文档 - [ref](https://v3.cn.vuejs.org/api/special-attributes.html#ref)
130 |
131 | ## 提示
132 |
133 | 1. 你可以通过给瀑布流内元素设置 `margin-bottom` 样式来控制其垂直间距
134 | 2. 你可以通过设置组件的 `align-content` 参数来改变列对齐方式
135 | 3. 如果瀑布流内有图片等会因加载或内容更新导致内容高度变化的元素，请在高度变动后重新调用 `updateOrder()`，或提前固定元素大小
136 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-flex-waterfall
2 |
3 | [](https://www.npmjs.com/package/vue-flex-waterfall)
4 | [](LICENSE)
5 |
6 | [中文文档](README-ZH.md)
7 |
8 | A horizontal sorting waterfall layout component for Vue 3, realized by flex layout.
9 |
10 | Refer to [CSS masonry with flexbox, :nth-child(), and order](https://tobiasahlin.com/blog/masonry-with-css/).
11 |
12 | > Version 2 requires Vue 3. If you are looking for a Vue 2 compatible version, use [version 1](https://github.com/Tsuk1ko/vue-flex-waterfall/tree/v1).
13 |
14 | ## Demo
15 |
16 | [Vue Flex Waterfall Demo](https://tsuk1ko.github.io/vue-flex-waterfall/)
17 |
18 | [Source code of demo](src/App.vue)
19 |
20 | ## Installation
21 |
22 | ### Requirements
23 |
24 | Vue ^3.0.0
25 |
26 | ### Node
27 |
28 | ```bash
29 | npm i vue-flex-waterfall
30 | ```
31 |
32 | ### Browser
33 |
34 | #### UNPKG
35 |
36 | ```html
37 |
38 | ```
39 |
40 | #### jsDelivr
41 |
42 | ```html
43 |
44 | ```
45 |
46 | ## Usage
47 |
48 | ```vue
49 |
50 |
56 |
57 |
58 |
59 |
60 |
63 | ```
64 |
65 | ## Props
66 |
67 | ### align-content
68 |
69 | Type: `String`
70 |
71 | Default: `undefined`
72 |
73 | Equal to *align-content* CSS value of the container.
74 |
75 | [MDN document](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)
76 |
77 | ### height
78 |
79 | Type: `Number | String`
80 |
81 | Default: `undefined`
82 |
83 | You can specify the height of the container. If not, height will be calculated automatically.
84 |
85 | The unit is *px* when it is a number.
86 |
87 | ### col
88 |
89 | Type: `Number | String`
90 |
91 | Default: `1`
92 |
93 | Default number of column. Use the `break-at` prop to specify breakpoints for this value.
94 |
95 | ### col-spacing
96 |
97 | Type: `Number | String`
98 |
99 | Default: `0`
100 |
101 | Column spacing. The unit is *px* when it is a number.
102 |
103 | Please note that its performance is related to the `align-content`.
104 |
105 | ### break-at
106 |
107 | Type: `Object`
108 |
109 | Default: `{}`
110 |
111 | This object allows you to specify how the number of columns will change based on the width of the viewport.
112 |
113 | Setting this option to `{ 900: 3 }` for example will adjust the number of columns to 3 when the viewport change and is <= 900px.
114 |
115 | ### break-by-container
116 |
117 | Type: `Boolean`
118 |
119 | Default: `false`
120 |
121 | When enable, the breakpoints will be based on the container width instead of the window width.
122 |
123 | ## Events
124 |
125 | ### order-updated
126 |
127 | Will be emitted after `order` of slot elements are updated.
128 |
129 | ## Methods
130 |
131 | ### updateOrder
132 |
133 | You can call this method to trigger `order` updating.
134 |
135 | How to call component method: see Vue Guide - [ref](https://v3.cn.vuejs.org/api/special-attributes.html#ref)
136 |
137 | ## Tips
138 |
139 | 1. You can set `margin-bottom` style for slot elements to control their vertical spacing.
140 | 2. You can set the prop `align-content` to control column alignment.
141 | 3. If there are elements that its size will change, such as images, please call `updateOrder()` after the size change or fixed the size.
142 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Vue Flex Waterfall Demo
9 |
10 |
11 |
12 |
15 |
16 |
Vue Flex Waterfall Demo
17 |
18 |
19 |
Try to add, delete or modify some blocks, and resize the window!
20 |
12 |
close
13 |
{{ item.i }}
14 |
15 |
22 | px
23 |
24 |