vue-picflow

0.1.5 • Public • Published

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.

Package Sidebar

Install

npm i vue-picflow

Weekly Downloads

1

Version

0.1.5

License

MIT

Unpacked Size

302 kB

Total Files

7

Last publish

Collaborators

  • falstack