使用Vue实现瀑布流的示例代码
更新时间：2024年02月06日 10:59:44 作者：天使的同类
这篇文章主要为大家详细介绍了如何使用Vue实现瀑布流,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
1.每个色块宽度一致，高度自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="user-scalable=0">
<title>Vertical Line</title>
<link rel="stylesheet" href="./common/css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<style>
.item-move {
transition: all .5s cubic-bezier(.55, 0, .1, 1);
-webkit-transition: all .5s cubic-bezier(.55, 0, .1, 1);
}
</style>
</head>
<body>
<div id="app">
<waterfall :align="align" :line-gap="200" :min-line-gap="100" :max-line-gap="220" :single-max-width="300"
:watch="items" @reflowed="reflowed" ref="waterfall">
<!-- each component is wrapped by a waterfall slot -->
<waterfall-slot v-for="(item, index) in items" :width="item.width" :height="item.height" :order="index"
:key="item.index" move-class="item-move">
<div class="item" :style="item.style" :index="item.index"></div>
</waterfall-slot>
</waterfall>
</div>
<script src="https://cdn.jsdelivr.net/vue/2.2.6/vue.min.js"></script>
<script src="http://app.moptym.com/cdn/vue-waterfall/vue-waterfall.min.js"></script>
<script src="./common/js/item-factory.js"></script>
<script>
var app = new Vue({
el: '#app',
components: {
'waterfall': Waterfall.waterfall,
'waterfall-slot': Waterfall.waterfallSlot
},
data: {
align: 'center',
items: ItemFactory.get(100),
isBusy: false
},
methods: {
addItems: function () {
if (!this.isBusy && this.items.length < 500) {
this.isBusy = true
this.items.push.apply(this.items, ItemFactory.get(50))
}
},
shuffle: function () {
this.items.sort(function () {
return Math.random() - 0.5
})
},
reflowed: function () {
this.isBusy = false
}
}
})
document.body.addEventListener('click', function () {
app.shuffle()
// app.$refs.waterfall.$emit('reflow') // manually trigger reflow action
}, false)
window.addEventListener('scroll', function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop + window.innerHeight >= document.body.clientHeight) {
app.addItems()
}
})
</script>
</body>
</html>
如图所示：
2.每个色块高度一致，宽度自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="user-scalable=0">
<title>Horizontal Line</title>
<link rel="stylesheet" href="./common/css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<style>
.item-move {
transition: all .5s cubic-bezier(.55, 0, .1, 1);
-webkit-transition: all .5s cubic-bezier(.55, 0, .1, 1);
}
</style>
</head>
<body>
<div id="app">
<waterfall :line="line" :line-gap="200" :min-line-gap="180" :max-line-gap="220" :watch="items" @reflowed="reflowed"
ref="waterfall">
<!-- each component is wrapped by a waterfall slot -->
<waterfall-slot v-for="(item, index) in items" :width="item.width" :height="item.height" :order="index"
:key="item.index" move-class="item-move">
<div class="item" :style="item.style" :index="item.index"></div>
</waterfall-slot>
</waterfall>
</div>
<script src="https://cdn.jsdelivr.net/vue/2.2.6/vue.min.js"></script>
<script src="http://app.moptym.com/cdn/vue-waterfall/vue-waterfall.min.js"></script>
<script src="./common/js/item-factory.js"></script>
<script>
var app = new Vue({
el: '#app',
components: {
'waterfall': Waterfall.waterfall,
'waterfall-slot': Waterfall.waterfallSlot
},
data: {
line: 'h',
items: ItemFactory.get(100),
isBusy: false
},
methods: {
addItems: function () {
if (!this.isBusy && this.items.length < 500) {
this.isBusy = true
this.items.push.apply(this.items, ItemFactory.get(50))
}
},
shuffle: function () {
this.items.sort(function () {
return Math.random() - 0.5
})
},
reflowed: function () {
this.isBusy = false
}
}
})
document.body.addEventListener('click', function () {
app.shuffle()
// app.$refs.waterfall.$emit('reflow') // manually trigger reflow action
}, false)
window.addEventListener('scroll', function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop + window.innerHeight >= document.body.clientHeight) {
app.addItems()
}
})
</script>
</body>
</html>
如图所示：
3.宽高不限制，每个色块顺着排
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="user-scalable=0">
<title>Vertical Line With Grow</title>
<link rel="stylesheet" href="./common/css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<style>
.item-move {
transition: all .5s cubic-bezier(.55, 0, .1, 1);
-webkit-transition: all .5s cubic-bezier(.55, 0, .1, 1);
}
</style>
</head>
<body>
<div id="app">
<waterfall :grow="grow" :watch="items" @reflowed="reflowed" ref="waterfall">
<!-- each component is wrapped by a waterfall slot -->
<waterfall-slot v-for="(item, index) in items" :width="item.width" :height="item.height" :order="index"
:key="item.index" move-class="item-move">
<div class="item" :style="item.style" :index="item.index"></div>
</waterfall-slot>
</waterfall>
</div>
<script src="https://cdn.jsdelivr.net/vue/2.2.6/vue.min.js"></script>
<script src="http://app.moptym.com/cdn/vue-waterfall/vue-waterfall.min.js"></script>
<script src="./common/js/item-factory.js"></script>
<script>
var app = new Vue({
el: '#app',
components: {
'waterfall': Waterfall.waterfall,
'waterfall-slot': Waterfall.waterfallSlot
},
data: {
grow: [3, 2, 1, 2],
items: ItemFactory.get(100),
isBusy: false
},
methods: {
addItems: function () {
if (!this.isBusy && this.items.length < 500) {
this.isBusy = true
this.items.push.apply(this.items, ItemFactory.get(50))
}
},
shuffle: function () {
this.items.sort(function () {
return Math.random() - 0.5
})
},
reflowed: function () {
this.isBusy = false
}
}
})
document.body.addEventListener('click', function () {
app.shuffle()
// app.$refs.waterfall.$emit('reflow') // manually trigger reflow action
}, false)
window.addEventListener('scroll', function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop + window.innerHeight >= document.body.clientHeight) {
app.addItems()
}
})
</script>
</body>
</html>
如图所示：
到此这篇关于使用Vue实现瀑布流的示例代码的文章就介绍到这了,更多相关Vue瀑布流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Element-UI Table组件上添加列拖拽效果实现方法
这篇文章主要为大家详细介绍了Element-UI Table组件上添加列拖拽效果的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
vue3+vite中报错信息处理方法Error: Module “path“ has&nb
这篇文章主要介绍了vue3+vite中报错信息处理方法Error: Module “path“ has been externalized for browser compatibility...,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
Vue过滤器,生命周期函数和vue-resource简单介绍
这篇文章主要介绍了Vue过滤器,生命周期函数和vue-resource简单介绍，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2021-01-01
在前端项目开发中,读写Excel文件的需求变得越来越常见,本文将详细介绍如何在Vue项目中利用FileReader对象和xlsx模块来读取Excel文件的内容,需要的可以参考下2024-03-03
这篇文章主要介绍了vue-cli 3.0 使用全过程，本文通过项目实例相结合的形式给大家介绍的非常详细,需要的朋友可以参考下2018-06-06
最近公司需要做个项目,需要拖拽表格和自定义表格字段,本文主要介绍了vue中el-table实现可拖拽移动列和动态排序字段,具有一定吃参考价值,感兴趣的可以了解一下2023-12-12
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
这篇文章主要介绍了解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
vue使用element-ui的el-date-picker设置样式无效的解决
本文主要介绍了vue使用element-ui的el-date-picker设置样式无效的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css、js以及图片等,那么打包后的文件该如何正确运行呢?这篇文章主要给大家介绍了关于vue打包之后的dist文件如何运行的相关资料,需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了Vue3中如何使用vue3-print-nb实现打印功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起参考一下2025-02-02
最新评论