vue如何实现瀑布流？

最新推荐文章于 2024-05-23 10:59:14 发布
最新推荐文章于 2024-05-23 10:59:14 发布
阅读量870 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59522382/article/details/123412792
版权

首先了解什么是瀑布流
1，页面显示一定的数据，比如五条数据或者更多 如图:

好的，那我们现在可以看到页面下面有一个图标是个正在转圈的图标，那就是一个公共组件的加载组件，当我们加载时都可以引入这个组件，又有人问公共组件是什么，你可以理解为就是一个组件里面有一个一直转圈的图标而已，好，言归正传，
在子组件中我们通过mounted触发一个侦听事件 如图:在这里插入图片描述
通过addEventlistenert触发我们methods中方法 注:方法名随便起
在判断中进行判断 判断当前浏览器可视高度是否小于我们旋转标签的高度住:我是通过ref过去dom标签大于的话执行父组件自定义事件再次进行axios请求

螺旋秃头阿巴怪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 瀑布流组件实现
weixin_54145360的博客
09-17 1559
最近项目要实现一个瀑布流布局，结合网上的案例以及自己的理解实现了一版，特在此记录一下，有兴趣的同学欢迎一起探讨交流学习 (第一次写这种东西~~~)，废话不多说，开整！！！！！先上张图！！！
Vue3瀑布流（Waterfall）
Mr Dear的博客
04-18 8571
瀑布流图片展示组件，效果杠杠滴！
Vue2瀑布流图片展示（Waterfall）
Mr Dear的博客
12-06 4260
Vue2使用纯CSS和JS计算两种方式实现的瀑布流图片展示组件
Vue3实现简单的瀑布流效果，可抽离成组件直接使用
最新发布
weixin_43312391的博客
05-23 612
Vue3实现瀑布流效果，组件已封装，直接使用即可。
vue瀑布流 - vue-waterfall-easy
haozi的博客
12-03 4070
vue 瀑布流 - vue-waterfall-easy
【Vue瀑布流布局】vue简单实现瀑布流布局，循环数据自动排列到最短的列上【详细注释，直接使用】
seeeeeeeeeee的博客
09-05 6598
瀑布流布局是什么呢？应用于什么场景呢？简单描述一下，就是，瀑布流布局就是宽度一致，但是高度不限定死，最终通过算法排列，使得布局出现一种上下交错显示的感觉，看起来像是瀑布一样。应用场景：可以说非常多了，比如最常见的淘宝，蘑菇街等都是瀑布流布局做前端的肯定都会遇到这种情况需要使用瀑布流布局那么今天我就专门整理一个好用的瀑布流布局实现方法以后小伙伴们在需要做到这个布局的时候可以直接来着复制去改改就可以使用了。
vue实现简单瀑布流布局
10-15
首先，我们来了解实现瀑布流布局的关键步骤： 1. **数据结构**：在示例中，数据以`waterfallData`数组的形式传递给组件，每个元素包含图片链接、描述信息等。为了适应瀑布流布局，我们需要对数据进行预处理。在`...
vue实现瀑布流组件滑动加载更多
10-15
主要为大家详细介绍了vue实现瀑布流组件滑动加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue瀑布流组件实现上拉加载更多
12-28
最近在做移动端h5页面，所以分页什么的就不能按照传统pc端的分页器的思维去做了，这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多，符合正常使用习惯。 ... <slot></slot> ...
Vue中实现瀑布流布局
11-28 799
【代码】Vue中实现瀑布流布局。
实现瀑布流布局的四种方法
热门推荐
Smile_666666的博客
05-13 2万+
一、 什么是瀑布流布局 1、是什么 页面上是一种 参差不齐 的多栏布局，类似上图所示随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，大部分为图片，图片 固定 宽度，高度 不一，根据原比例缩放到宽度达到固定的要求，每行排满后，新的图片添加到后面 2、特点 固定宽度，高度不一 岑参不齐的布局 以图片为主 二、有什么优缺点 1、优点 节省空间：降低页面的复杂 对于 触屏设备非常友好：通过向上滑动浏览，交互方式更符合直觉 良好的视觉体验：浏览时不会被页面整整齐齐的高度影响，
Vue瀑布流插件的使用示例
12-29
我自己写的一个的Vue瀑布流插件，列数自适应，不用设置每个卡片的高度。 测试页面：Page.vue 模板页面：WaterFollow.vue 和 WFColumn.vue 在Page.vue中，修改itemW的值，设置每列的最小宽度。例如：itemW=”200″（意为200px）。list为数组。高度不用设置，:style=”{height:item+’px’}”是我为了创造卡片高度加上去的，不加就显示卡片的原来大小。 经测试，created加载数据正常，mounted加载、更新数据正常。 Page.vue <template> <div class=container> <w-
微信小程序实战，基于vue2实现瀑布流
隐风的博客
11-21 3735
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
瀑布流的简单实现（vue3+ts）
qq_45331969的博客
07-01 803
瀑布流的实现
Vue3+TypeScript实现瀑布流布局
远小帅的博客
02-28 1537
瀑布流布局（Waterfall Flow Layout）是一种常用于网页设计的布局方式，它可以实现图片或内容的自适应排列，使页面看起来更加美观和流畅。先看实现效果： 下面是使用 vue 实现瀑布流布局的一般步骤： 1.定义列数、行间距、列间距 2.容器设置为相对定位、item设置为绝对定位 3.获取容器宽度：容器总宽度-内边距（paddingLeft+paddingRight） 4.计算每列宽度：(容器宽度 - 列间距 * (列数 - 1)) / 列数 5.获取每一个item的高度（需要放在nextTic
用JS简单实现图片瀑布流 + 无限瀑布流效果
qq_26705343的博客
02-20 534
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l
Vue项目中 vue-waterfall-easy 瀑布流框架使用
Sun~Neo
02-22 6818
1、Installation（安装） 进入到项目当前文件夹，执行命令： npm install vue-waterfall-easy --save 2、引入vue-waterfall-easy 2.1、main.js中引入 import vueWaterfallEasy from 'vue-waterfall-easy' 2.2、当前vue文件包含组件 export defau...
vue.js实现瀑布流之vue-waterfall-easy
weixin_30747253的博客
08-22 645
想必大家应该很多都已经习惯了jquery的DOM操作，jquery的瀑布流实现起来也很容易。 但是，随着时代的发展，随着时代的进步..... 算了算了，扯远了，既然能找到这儿来，肯定是在vue.js上已经有一定的基础了，咱们废话不多说，直接进入主题。 转载请注明出处：http://www.cnblogs.com/meng1314-shuai/p/7407055.html！！！！！ 那些复...
vue实现瀑布流布局
07-28
Vue可以通过使用第三方库来实现瀑布流布局。一个常用的库是Masonry，它提供了一个Vue组件来实现瀑布流布局。 首先，你需要安装Masonry库。可以通过命令行运行以下命令来安装： ``` npm install vue-masonry --save ``` 安装完成后，在你的Vue组件中引入Masonry库： ```javascript import VueMasonry from 'vue-masonry' ``` 接下来，在你的Vue组件中使用Masonry组件，并传入要展示的内容： ```html <template> <div> <vue-masonry> <div v-for="item in items" :key="item.id" class="grid-item"> <!-- 这里是每个瀑布流项的内容 --> </div> </vue-masonry> </div> </template> ``` 在上面的代码中，我们使用`v-for`指令遍历数据数组`items`，并为每个项生成一个`div`元素作为瀑布流的一列。 最后，记得在Vue组件中注册Masonry组件： ```javascript export default { components: { VueMasonry }, data() { return { items: [ // 这里是你的数据 ] } } } ``` 这样就可以实现一个简单的瀑布流布局。你可以根据具体需求对样式进行调整，比如设置每列的宽度、间距等。 希望对你有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值