libin1991 / vue-flex-waterfall Goto Github PK

View Code? Open in Web Editor NEW

🌊 A horizontal sorting waterfall layout component for Vue.js, realized by flex layout

License: MIT License

JavaScript 4.74% Vue 95.26%

vue-flex-waterfall's Introduction

vue-flex-waterfall

A horizontal sorting waterfall layout component for Vue.js, realized by flex layout.

Refer to CSS masonry with flexbox, :nth-child(), and order.

中文文档

Demo

Vue Flex Waterfall Demo

Source code of demo

Installation

npm i vue-flex-waterfall

Usage

Vue project

<vue-flex-waterfall
  col="4"
  col-spacing="15"
  :break-at="{ 900: 3, 600: 2, 300: 1 }"
>
  <!-- items -->
</vue-flex-waterfall>

import VueFlexWaterfall from 'vue-flex-waterfall';

export default {
  // ...
  components: {
    VueFlexWaterfall,
    // ...
  },
  // ...
}

Browser

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-flex-waterfall.min.js"></script>

Props

height

Type: Number | String

Default: null

You can specify the height of the container. If not, height will be calculated automatically.

The unit is px when it is a number.

col

Type: Number | String

Default: 1

Default number of column. Use the break-at prop to specify breakpoints for this value.

col-spacing

Type: Number | String

Default: 0

Column spacing. The unit is px when it is a number.

break-at

Type: Object

Default: null

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.

break-by-container

Type: Boolean

Default: false

When enable, the breakpoints will be based on the container width instead of the window width.

Events

order-update

Will be emited after order of slot elements are updated.

Methods

updateOrder

You can call this method to trigger order updating.

How to call component method: Vue.js Guide - Accessing Child Component Instances & Child Elements

Tips

You can set margin-bottom style for slot elements to control their vertical spacing.
You can set align-content style for vue-flex-waterfall component to control column alignment.

Recommend Projects