...and, this repository is inspired by following two repositories myst729/Waterfall, MopTym/vue-waterfall
biu~ <---click here to see it
npm install --save vue-biu-waterfall
import { WaterfallContainer, WaterfallCell } from 'vue-biu-waterfall/lib'
// these two are for ...
let items = ...
const reflow= ...
const reflowed = ...
<WaterfallContainer @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>
</WaterfallContainer>
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.
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.
This is a event for lazy-load, you can call a function to add items when this event was triggered.
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.
Released under the MIT License.