使用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瀑布流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
这篇文章主要介绍了vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component的相关知识,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
最新评论