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.

    Install

    npm i vue-picflow

    DownloadsWeekly Downloads

    7

    Version

    0.1.5

    License

    MIT

    Unpacked Size

    302 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar