1.0.0 • Published 1 year ago
tavern-waterfall-layout v1.0.0
使用方法
安装
npm install tavern-waterfall-layout --save
- 使用 在
vue
中
<template>
<div class="list">
<div class="waterfall" id="waterfall">
<div class="wapper-item" v-for="item in 6" :key="item" >{{ item }}</div>
</div>
</div>
</template>
<script setup lang="ts">
import wLayout from 'tavern-waterfall-layout'
import { onMounted } from 'vue'
onMounted(() => {
const waterfall = document.getElementById('waterfall')
let wlayout = new wLayout(waterfall, { gap: 20 })
wlayout.init()
})
</script>
<style lang="scss" scoped>
.wapper {
position: relative;
width: 100vh;
&-item {
width: 300px;
height: 100px;
margin-bottom: 20px;
}
}
</style>
Attributes
参数 | 说明 | 类型 | 可选值 | 默认 |
---|---|---|---|---|
DOM | 参数1 | Document | ||
options | 参数2,gap: 间距 | Object | Gap | 0 |
1.0.0
1 year ago