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"><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 = truethis.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.scrollTopif (scrollTop + window.innerHeight >= document.body.clientHeight) {app.addItems()}})</script>
</body></html>

如图所示：
在这里插入图片描述

  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>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 = truethis.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.scrollTopif (scrollTop + window.innerHeight >= document.body.clientHeight) {app.addItems()}})</script>
</body></html>

如图所示：
在这里插入图片描述

  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 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 = truethis.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.scrollTopif (scrollTop + window.innerHeight >= document.body.clientHeight) {app.addItems()}})</script>
</body></html>

如图所示：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/443589.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ModelArts加速识别，助力新零售电商业务功能的实现

ModelArts加速识别，助力新零售电商业务功能的实现

前言 如果说为客户提供最好的商品是产品眼中零售的本质&#xff0c;那么用户的思维是什么呢&#xff1f; 在用户眼中&#xff0c;极致的服务体验与优质的商品同等重要。 企业想要满足上面两项服务&#xff0c;关键在于提升效率&#xff0c;也就是需要有更高效率的零售&#…
阅读更多...
存内计算技术—解决冯·诺依曼瓶颈的AI算力引擎

存内计算技术—解决冯·诺依曼瓶颈的AI算力引擎

文章目录 存内计算技术背景CSDN首个存内计算开发者社区硅基光电子技术存内计算提升AI算力知存科技存算一体芯片技术基于存内计算的语音芯片的实现挑战 参考文献 存内计算技术背景 存内计算技术是一种革新性的计算架构&#xff0c;旨在克服传统冯诺依曼架构的瓶颈&#xff0c;并…
阅读更多...
TSINGSEE青犀智能分析网关V4—让加油站迈入AI智能检测时代

TSINGSEE青犀智能分析网关V4—让加油站迈入AI智能检测时代

一、背景与需求 中国目前建设加油站超过10万个&#xff0c;作为高危场所对于烟火&#xff0c;危险区域管控、消防器材等管理要求严格&#xff0c;稍有不慎即酿成大祸。由于春节临近&#xff0c;加油站各类人员进出频繁&#xff0c;安全意识较低&#xff0c;依靠普通监控人力的…
阅读更多...
探索半导体制造业中的健永科技RFID读写器的应用方案

探索半导体制造业中的健永科技RFID读写器的应用方案

一、引言 在当今高度自动化的工业环境中&#xff0c;无线射频识别&#xff08;RFID&#xff09;技术已经成为实现高效生产的重要一环。特别是在半导体制造业中&#xff0c;由于产品的高价值和复杂性&#xff0c;生产过程的追踪和管理显得尤为重要。健永科技RFID读写器以其出色…
阅读更多...
编译Opencv3.3.1遇到的编译器无法识别的警告的问题解除：

编译Opencv3.3.1遇到的编译器无法识别的警告的问题解除：

问题描述&#xff1a; 本文&#xff0c;就是在一个硬件的SDK中用到了opencv3.3.1的版本&#xff0c;在笔者目前的VS2019,CUDA11版本下编译的问题和解决。在做Cmake的configure的时候&#xff0c;Cmake报了一个找不到编译器版本的错误, Selecting windows SDK version 10.0.1904…
阅读更多...
day38 ● 509. 斐波那契数 ● 70. 爬楼梯 ● 746. 使用最小花费爬楼梯

day38 ● 509. 斐波那契数 ● 70. 爬楼梯 ● 746. 使用最小花费爬楼梯

动态规划是前一个状态推导过来的&#xff0c;贪心是局部最优解。 class Solution { public:int fib(int n) {int a0;int b1;int res0;if(n1) return 1;for(int i2;i<n;i){resab;ab;bres;}return res;} }; 可以由前面状态推出后面状态&#xff0c;是动态规划。由于始终只要后…
阅读更多...
postman用法

postman用法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、postman怎么使用json输出 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 提示&#xff1a;以下是本篇文章正文内容&#xff0…
阅读更多...
VBA代码解决方案第十讲:利用VBA代码完成复制

VBA代码解决方案第十讲:利用VBA代码完成复制

《VBA代码解决方案》(版权10028096)这套教程是我最早推出的教程&#xff0c;目前已经是第三版修订了。这套教程定位于入门后的提高&#xff0c;在学习这套教程过程中&#xff0c;侧重点是要理解及掌握我的“积木编程”思想。要灵活运用教程中的实例像搭积木一样把自己喜欢的代码…
阅读更多...
【Linux】600条最强Linux命令总结—— 干货满满！！！

【Linux】600条最强Linux命令总结—— 干货满满！！！

目录 1. 基本命令 2. 关机 3. 文件和目录 4. 文件搜索 5. 挂载一个文件系统 6. 磁盘空间 7. 用户和群组 8. 文件的权限 使用 “” 设置权限&#xff0c;使用 “-” 用于取消 9. 文件的特殊属性 &#xff0c;使用 “” 设置权限&#xff0c;使用 “-” 用于取消 10. 打…
阅读更多...
如何配置 Podman 使用国内镜像源？

如何配置 Podman 使用国内镜像源？

Podman 配置国内镜像源 什么是 Podman&#xff1f;Docker 与 Podman 区别修改 Podman 容器注册表配置国内的镜像源Podman Container Registries 修改步骤检查配置是否生效 Podman 容器存储总结 什么是 Podman&#xff1f; Podman 是一种符合 OCI 标准的容器管理工具&#xff0c…
阅读更多...
推特账号被冻结怎么办？检查IP是否正常

推特账号被冻结怎么办？检查IP是否正常

Twitter 拥有庞大的用户群和日常内容流&#xff0c;是沟通、网络和营销的重要平台。然而&#xff0c;处理其限制和潜在的帐户问题可能很棘手。有许多跨境社媒小伙伴反馈&#xff0c;账号无故被冻结&#xff0c;导致内容与客户尽失&#xff01;其实除了账户养号、被举报、广告信…
阅读更多...
《Pandas 简易速速上手小册》第2章：Pandas 数据导入与导出（2024 最新版）

《Pandas 简易速速上手小册》第2章：Pandas 数据导入与导出（2024 最新版）

文章目录 2.1 读取 CSV 和 Excel 文件2.1.1 基础知识2.1.2 重点案例&#xff1a;电商销售数据分析步骤1&#xff1a;数据准备步骤2&#xff1a;数据导入步骤3&#xff1a;销量分析 2.1.3 拓展案例一&#xff1a;金融市场数据分析步骤1&#xff1a;数据准备步骤2&#xff1a;数据…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023