vue-picflow

一个简单的 vue 的瀑布流组件

feature

1. 支持百分比宽度，vw
2. 支持瀑布流的惰性填充
3. 暂不支持 resize
4. 暂不支持重排序

download

yarn add vue-picflow

or

npm install vue-picflow

usage

import { Waterfall, WaterfallSlot } from 'vue-picflow'

components: {
  Waterfall,
  WaterfallSlot
}

<template>
  <waterfall
    line-width="50%"
    :line-count="2"
    :margin-bottom="10"
    :margin-right="10"
    :extra-height="40"
    :vw-viewport="375"
    :max-height="300"
  >
    <waterfall-slot
      v-for="item in items"
      :key="item.index"
      :index="item.index"
      :width="item.width"
      :height="item.height"
      transition="fade"
    >
      <div class="demo">
        <div
          :style="{
            backgroundColor: item.style.color,
            backgroundImage: `url(${item.style.image})`,
            paddingTop: `${(item.height / item.width) * 100}%`
          }"
          class="image"
        />
        <div class="panel">{{ item.index }}</div>
      </div>
    </waterfall-slot>
  </waterfall>
</template>

waterfall args

| key | value | meaning | required | | ------ | ------ | ------ | ------ | | line-width | Number, px, %, vw | 每行的宽度 | Y | | line-count | Number, >= 2 | 瀑布流的行数 | Y | | margin-bottom | Number, >= 0 | 每个块的上下间距 | N | | margin-right | Number, >= 0 | 每行的间距 | N | | extra-height | Number, >= 0 | 出去图片外的 DOM 的高度 | N | | vw-viewport | Number, >= 0 | vw 模式下的视口宽度 | N | | max-height | Number, >= 0 | 每个块的最大高度 | N | | lazy-scale | Number, >= 1 | 懒加载的比率 | N |

waterfall-slot args

| key | value | meaning | required | | ------ | ------ | ------ | ------ | | width | Number, >= 0 | 图片的宽度 | Y | | height | Number, >= 0 | 图片的高度 | Y | | index | Number, >=0 | 图片的 index | Y | | transition | String | 每个块的渐变动画 | N |

Project setup

yarn install

Compiles and hot-reloads for development

yarn run dev

Compiles and minifies for production

yarn run build

Lints and fixes files

yarn run lint

Run your unit tests（nothing）

yarn run test:unit

Customize configuration

See Configuration Reference.