热门标签
热门文章
- 1*p++与(*p)++与*(p++)------自增运算符常见误区
- 2SpringBoot-插件化以及springboot扩展接口_spring boot spi第三方扩展
- 3图像增强：自适应直方图均衡化(AHE)
- 4微信公共号消息推送给你心爱的她/他-Python3版本_微信推送怎么创建python文件
- 5Spring Boot Helper插件免费版的下载_spring boot helper插件下载
- 6windows上搭建llama小型私有模型_llama-cpp-python
- 71.9 向量投影_向量投影法
- 8怎么样检查自己系统上的Python环境中是否有某个包(扩展库)？_python怎么检查是否有某个库
- 9三种安装docker-compose方式_docker compose安装
- 10Windows脚本 - Bat批处理命令使用教程_批处理 菜鸟教程
当前位置: article > 正文
vue实现瀑布流_
作者：繁依Fanyi0 | 2024-02-17 00:15:31
赞
踩
- 每个色块宽度一致，高度自适应
<!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"> <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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
如图所示：
- 每个色块高度一致，宽度自适应
<!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"> <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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
如图所示：
- 宽高不限制，每个色块顺着排
<!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"> <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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
如图所示：
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/98147
