vue3 - 【完整源码】实现网页整屏大量图片、div 容器的自适应瀑布流布局，宽高度不固定的列表式瀑布流展示效果（高效无 BUG 网站瀑布流效果，超详细代码注释，可根据需求快速进行改造！）

已于 2024-02-03 17:20:45 修改
阅读量5.1k 收藏 5
点赞数 3
分类专栏： 前端组件与功能(开箱即用) 文章标签： vue3 瀑布流布局详细教程 vue3图片列表瀑布流组件 宽高不固定的div实现瀑布 vue3最好用的瀑布流组件插件 vue3瀑布流布局完整示例源码
于 2023-05-10 17:49:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/130606003
版权

效果图

在 vue3.js 网站项目中，实现图片、普通div容器的瀑布流效果完整示例，支持动态加载数据、自定义一行放多少个、各列之间的间距等等！

你可以直接复制组件源码，按照配置文档稍微改改就能用到你的项目中去了，比绝大部分文章提供的示例都要流畅、快速。

在这里插入图片描述

核心组件源码

组件的存放位置无所谓，最后使用的时候能正确引入就行了。

创建瀑布流组件 Waterfall.vue，复制代码。

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
vue 实现的瀑布流 -- 基于flex
一个学vue用vue的前端大白,休闲听音乐，https://unpkg.com/v3demo/index.html
09-05 1197
支持动态列数变化哦！兼容度高
vue 未知宽高 列 瀑布流
xiaoyai0322的博客
05-29 543
componts <template> <div> <div> <div class="list move_list" :style="{'--scroll-margin':scrollmargin+'px','--div-width':scrollwidth+'%'}"> <div v-for="(index1,item1) in listlength" class="scrollmarginleft" :key="ite.
uniapp VUE纯CSS实现高度不相等的瀑布流
最新发布
初遇你时动了情
04-26 154
【代码】uniapp VUE纯CSS实现高度不相等的瀑布流。
【Vue瀑布流布局】vue简单实现瀑布流布局，循环数据自动排列到最短的列上【详细注释，直接使用】
seeeeeeeeeee的博客
09-05 6500
瀑布流布局是什么呢？应用于什么场景呢？简单描述一下，就是，瀑布流布局就是宽度一致，但是高度不限定死，最终通过算法排列，使得布局出现一种上下交错显示的感觉，看起来像是瀑布一样。应用场景：可以说非常多了，比如最常见的淘宝，蘑菇街等都是瀑布流布局做前端的肯定都会遇到这种情况需要使用瀑布流布局那么今天我就专门整理一个好用的瀑布流布局实现方法以后小伙伴们在需要做到这个布局的时候可以直接来着复制去改改就可以使用了。
Vue3瀑布流（Waterfall）
Mr Dear的博客
04-18 7940
Vue3+TS使用JS计算方式实现的瀑布流图片展示组件。
vue+element简单实现电商商城网站，模仿小米电商商城
热门推荐
lucky_fang的博客
11-25 3万+
vue+element简单实现商城网站首页，模仿小米电商商城
基于node+Vue搭建网上购物商城实现（源码+文档+定制）
m0_59186440的博客
02-15 5725
随着现在网络迅猛发展，网上在线购物商城也逐渐快速发展起来，网上模式很快融入到了许多商家的眼球之中，随之就产生了“网上购物商城系统”，这样就让在线购物商城变的更加方便简单。
vue实现简单瀑布流布局
11-21
需求：图片容器宽度固定，高度根据图片自适应，图片一行不能排列时候，换行依次从左往右排列。（瀑布流概念） 另外结合vue-lazy实现懒加载 （ npm i vue-lazyload –save-dev） 使用也很简单，在需要懒加载的img...
vue.js组件vue-waterfall-easy实现瀑布流效果
12-12
想必大家应该很多都已经习惯了jquery的DOM操作，jquery的瀑布流实现起来也很容易。 但是，随着时代的发展，随着时代的进步….. 算了算了，扯远了，既然能找到这儿来，肯定是在vue.js上已经有一定的基础了，咱们废话...
Vue3使用css特性transform实现可视化大屏自适应解决方案
07-29
操作：代码注释写的很详细，很容易就明白，对vue3不熟悉的小伙伴更加友好，将源码下载后拷贝进项目中，然后就可以直接将自己的大屏展示内容嵌套进去。相当于对整个可视区域进行了缩放操作，很方便快捷易懂。 自适应...
vue瀑布流组件(vue-waterfall-easy 2.x)
02-21
vue瀑布流组件(vue-waterfall-easy 2.x) 这是一个vue组件，包含瀑布流布局和无限滚动加载 与其他实现相比，无需在返回的数据中指定图像的宽度和高度 正是因为有了第二项，图像才被预加载，然后进行布局 响应式...
等宽瀑布流照片显示
08-10
实现照片数据等宽、瀑布流显示
前端手写瀑布流
zhaojiuyi的博客
08-25 622
使用原生js实现一个常见的网页布局——瀑布流
vue实现功能完整的购物商城，商品零食、电商通用商城
lucky_fang的博客
05-17 4966
vue实现功能完整的购物商城，商品零食、电商通用商城，项目基于vue+amazeUI+jquery+elementui实现，完美实现响应式布局。作者这里在传统html静态项目基础上整合了vue项目，如需传统html项目资源记得@作者欢迎交流，关注作者，及时了解更多好项目！获取源码或如需帮助，可通过博客后面名片+作者即可！
Vue3+TypeScript实现瀑布流布局
远小帅的博客
02-28 1517
瀑布流布局（Waterfall Flow Layout）是一种常用于网页设计的布局方式，它可以实现图片或内容的自适应排列，使页面看起来更加美观和流畅。先看实现效果： 下面是使用 vue 实现瀑布流布局的一般步骤： 1.定义列数、行间距、列间距 2.容器设置为相对定位、item设置为绝对定位 3.获取容器宽度：容器总宽度-内边距（paddingLeft+paddingRight） 4.计算每列宽度：(容器宽度 - 列间距 * (列数 - 1)) / 列数 5.获取每一个item的高度（需要放在nextTic
vue 瀑布流组件实现
weixin_54145360的博客
09-17 1533
最近项目要实现一个瀑布流布局，结合网上的案例以及自己的理解实现了一版，特在此记录一下，有兴趣的同学欢迎一起探讨交流学习 (第一次写这种东西~~~)，废话不多说，开整！！！！！先上张图！！！
记录--Vue3基于Grid布局简单实现一个瀑布流组件
林恒的博客
11-06 870
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 在学习Grid布局之时，我发现其是CSS中的一种强大的布局方案，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局，在刷某书和某宝首页时，我们发现其展示方式就是一种瀑布流，是一种流行的网站页面布局，视觉表现为参差不齐的多栏布局，随着页面向下滚动，这种布局会不断加载数据块并附加到当前尾部。采用瀑布流布局的方式...
移动端纯css实现瀑布流
风度
06-20 1938
效果图： css: 最关键的column-count: 2; 数字为2，代表一行显示几个; break-inside: avoid; 去空白，避免换行 .content{ padding: 30rpx; box-sizing: border-box; column-count: 2; border: 1px solid red; .list { break-inside: avoid; width: 330rpx; border: 1...
vue3 设置el-table 高度自适应（2种方案）
会点php的前端小渣渣
01-04 6048
【代码】vue3 设置el-table 高度自适应。
vue3 - 【完整源码】实现网页整屏大量图片、div 容器的自适应瀑布流布局,宽高度不
01-03
自适应瀑布流布局是指在网页中展示大量图片和div容器，并且根据容器的宽高度自动调整布局。在Vue3中实现这样的布局，可以使用以下步骤： 首先，安装Vue3并创建Vue实例。 ```javascript npm install vue@next ``` 在Vue中创建动态组件，并为每个组件设置一个宽高。 ```html <template> <div> <component v-for="(item, index) in items" :key="index" :is="item.type" :style="{ width: item.width + 'px', height: item.height + 'px' }"></component> </div> </template> <script> import ImageComponent from './components/ImageComponent.vue' import DivComponent from './components/DivComponent.vue' export default { data() { return { items: [ { type: 'image', width: 200, height: 300, }, { type: 'div', width: 250, height: 150, }, // 添加更多的图片和div容器 ], } }, components: { ImageComponent, DivComponent, }, } </script> ``` 在组件中，可以使用CSS的flex布局来实现自适应瀑布流布局。 ```html <template> <div class="container"> <!-- 图片组件的模板 --> </div> </template> <style scoped> .container { display: flex; flex-wrap: wrap; justify-content: space-between; } </style> ``` 通过以上步骤，我们可以实现一个简单的自适应瀑布流布局。当有新的图片或div容器加入时，布局会自动调整以适应屏幕宽度和高度。不同宽度和高度的元素会按照一定的规则排列，形成一个美观的瀑布流效果。 以上是一个简单的示例，实际情况下，你可以根据具体的需求进行更多的定制和优化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值