A waterfall layout based on vue3 and typescript(still in developing now)

...and, this repository is inspired by following two repositories myst729/Waterfall, MopTym/vue-waterfall

~~ps:you know what? I want to call this biuterfall(biu-waterfall->biuterfall,and similar to beautiful)~~

Demo

biu~ <---click here to see it

Installation

npm install --save vue-biu-waterfall

Import

vue3 + setup + ts

import { WaterfallConfig, WaterfallCell } from 'vue-biu-waterfall/lib'

// these two are for ... 

let items = ...

const reflow= ...
const reflowed = ...

template structure

    <WaterfallConfig  @scrollToBottom="reflow" @allThingDone="reflowed">
      <WaterfallCell :waterCell="item" v-for="item in items" :key="item.index">
        <div>
           <!-- {{ item.lalala }}  -->
           <!-- and you can put more things in this div, such as <img src="item.url">...... -->
        </div>
      </WaterfallCell>
    </WaterfallConfig>

Props

waterfallConfig

Name | Default | Description ---- | ---- | ---- line-gap | ---- | Required. The standard space (px) between lines. min-line-gap | ---- | The minimal space between lines. max-line-gap | --- | The maximal space between lines. single-max-width | --- |The maximal width of slot which is single in horizontal direction. watch | ---- | Watch something, reflow when it changes. interval | ---- | The minimal time interval (ms) between reflow actions.

these props are for computing a layout,I have given a suitable default config, but you can check this function to know how it works exactly, and try out your own config.

waterfallCell

Name | Default | Description ---- | ---- | ---- item | ---- | item item.index | ---- | Required item.width | ---- | Required item.height | ---- | Required item.style | ---- | ---- item.url | ---- | ---- item.content | ---- | ---- '[keyName: string]: any '| ---- | ----

Here we directly pass the object into waterfallCell, but the object should have flowing features: index, height, width. These three are needed to computed the rect to display and can't be empty, the style, url, content could be empty, I give it here to make it convenient to store and use the features you may want in template, and if you don't like these names... '[keyName: string]: any', define it yourself is also ok.

Transition

Events

@scrollToBottom

This is a event for lazy-load, you can call a function to add items when this event was triggered.

@allThingDone

This is a event for preventing the excessive requests(such as too much scroll) smash the machine, you can use it with a lock variable to protect the program. And you can use many other way help to implement debouncing and throttling.

Reactivity

License

Released under the MIT License.