column-vue-waterfall

分列布局的瀑布流组件，无需知道每个卡片的具体高度，但是你始终应该提供一个默认高度，此高度不会作为最终高度展示 卡片样式尺寸完全自定义

Build Setup

# 安装
npm install column-vue-waterfall

全局使用

import waterfall from 'column-vue-waterfall'

Vue.use(waterfall)

页面内使用

template>
  <div id="app">
    <div class="home">
      <waterfall
        :data="items"
        :column="2"
        :gutter="17"
        @reflowed="reflowed"
      >
        <template v-slot="item">
          <!-- 自定义卡片,尺寸样式完全自定义 -->
          <div class="item" :style="{...item.style, height: item.height + 'px'}">{{item.index}}</div>
        </template>
      </waterfall>
    </div>
  </div>
</template>

<script>
import { Waterfall } from 'column-vue-waterfall'

export default {
  name: 'app',
  components: {
    Waterfall
  },
  data() {
    return {
      items: [{}]
    }
  }
}
</script>

Options

Attribute	Description	Type	Accepted Values	Default
data	渲染的数据	Array	必须包含 __height, 数组的每一项会暴露出一个索引 'idx'	[]
column	列数	number	-	2
gutter	列间距		number	-
autoResize	设备宽度变化是否重新渲染	boolead	true/false	true