A horizontal sorting waterfall layout component for Vue.js, realized by flex layout
npm install vue-flex-waterfall
A horizontal sorting waterfall layout component for Vue 3, realized by flex layout.
Refer to CSS masonry with flexbox, :nth-child(), and order.
> Version 2 requires Vue 3. If you are looking for a Vue 2 compatible version, use version 1.
Vue ^3.0.0
``bash`
npm i vue-flex-waterfall
#### UNPKG
`html`
#### jsDelivr
`html`
`vue
col="4"
col-spacing="16"
:break-at="{ 900: 3, 600: 2, 300: 1 }"
>
`
Type: String
Default: undefined
Equal to align-content CSS value of the container.
Type: Number | String
Default: undefined
You can specify the height of the container. If not, height will be calculated automatically.
The unit is px when it is a number.
Type: Number | String
Default: 1
Default number of column. Use the break-at prop to specify breakpoints for this value.
Type: Number | String
Default: 0
Column spacing. The unit is px when it is a number.
Please note that its performance is related to the align-content.
Type: Object
Default: {}
This object allows you to specify how the number of columns will change based on the width of the viewport.
Setting this option to { 900: 3 } for example will adjust the number of columns to 3 when the viewport change and is <= 900px.
Type: Boolean
Default: false
When enable, the breakpoints will be based on the container width instead of the window width.
Will be emitted after order of slot elements are updated.
You can call this method to trigger order updating.
How to call component method: see Vue Guide - ref
1. You can set margin-bottom style for slot elements to control their vertical spacing.align-content
2. You can set the prop to control column alignment.updateOrder()` after the size change or fixed the size.
3. If there are elements that its size will change, such as images, please call