vue环境简单实现动态瀑布流效果

最近开发项目需要实现动态瀑布流效果，项目本身是vue环境，网上很难找到类似的效果，vue-waterfall插件，懂的都懂。看了源码就知道不符合我项目目前的场景。（列表是循环渲染，高度不能提前预知也不能提前获取到，因此该组件是用不了的。—看了waterfall组件示例源码的小伙伴应该清楚）。
除了waterfall，其次就是用原生js写了。但是我不想用原生js写在vue项目中，过于冗长且不便维护。于是结合目前的情况我给出一个方案：
tips：我们项目导致瀑布流的主要原因只是描述文本的行数。最多两行，最少一行~~(见下图左右文本区别)，每个item之间相差的高度仅仅只是一行文本的高度

1、分成左右两个大列表
2、请求回来的数据分别左右分给这两个列表（主要用到：mod % 取余判断余数为0 或1）
3、在上面的基础上把每次请求回来的数据的最后一个数据不分配，判断左右列表的高度，分配给高度较低的那一个

第三步主要是为了保证左右两边高度差变小

tips：我们项目导致瀑布流的主要原因只是描述文本的行数。最多两行，最少一行~~，每个item之间相差的高度仅仅只是一行文本的高度。（有类似需求的小伙伴完全可以用此方式来实现瀑布流，节省性能，更高效，上拉加载一次，获取一次左右高度即可!!!)

下一步：
上代码 html

 <!-- 视频内容 --><div class="video_lists"><div class="mini-video-list1" ref='video_left'><mini-video-contentv-for="(miniVideo, index) in miniVideoLeftList":key="index":miniVideo="miniVideo":index="index"></mini-video-content></div><div class="mini-video-list2" ref='video_right'><mini-video-contentv-for="(miniVideo, index) in miniVideoRightList":key="index":miniVideo="miniVideo":index="index"></mini-video-content></div></div>

js：

获取左边视频盒子高度

this.$refs.video_left.offsetHeight

请求数据回来之后的操作（每次上拉加载请求回来的数据是10条，加载全部的最后一次除外）

   if (res.result) {if (res.result.resultList && res.result.resultList.length) {//  除去返回数据的最后一条  % 2 = 0 放左边  =1放右边let miniVideonewLeftList = res.result.resultList.filter((_, index) => {if (index < res.result.resultList.length - 1) { //除去返回数据的最后一条return index % 2 === 0;}});let miniVideonewRightList = res.result.resultList.filter((_, index) => {if (index < res.result.resultList.length - 1) {//除去返回数据的最后一条return index % 2 === 1;}}); //先把除了最后一个数据项的赋值过去this.miniVideoLeftList.push(...miniVideonewLeftList);this.miniVideoRightList.push(...miniVideonewRightList);//判断 左边的高度 和右边的高度  哪个矮吧最后一项放在哪边if (this.$refs.video_left &&this.$refs.video_left.offsetHeight <= this.$refs.video_right &&this.$refs.video_right.offsetHeight) {this.miniVideoLeftList.push(res.result.resultList[res.result.resultList.length - 1]);} else {this.miniVideoRightList.push(res.result.resultList[res.result.resultList.length - 1]);}

完成~

实测完全ok ~ 10个列表项纠正一下高度差完全ok、
如果你的项目item也是高度差不大（比如我的就差一行文本而已），就可以用这个方式。
希望可以帮助到你们~

vue环境简单实现动态瀑布流效果相关推荐

JS实现动态瀑布流及放大切换图片效果(js案例)
整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...
原生JS实现瀑布流效果
前两天通过B站在极客学院学习了JS动态瀑布流效果:主要是HTML+CSS控制样式,通过JS实现全局瀑布流样式,以及通过访问自定义的JSON字符串,实现图片无限加载:现对其代码进行整理,供日后学习参考. ...
利用JS实现简单的瀑布流效果
转载:https://www.cnblogs.com/dyx-wx/p/4642637.html 一.瀑布流之准备工作首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话 ...
手把手带你使用Vue实现一个图片水平瀑布流插件
如何使用Vue实现一个图片水平瀑布流插件?这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助. 一.需求来源今天碰到了一个需求,需要在页面里,用水平瀑布流的方式,将一些图片进行加载,这让我 ...
30个创意出色的非常实用的jquery框架插件-(视觉大背景，瀑布流效果)
jQuery是在网页设计师和开发者最近的热门话题之一.人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放,视频播放等 ...
网页瀑布流效果实现的几种方式
前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb i ...
jQuery实现响应式瀑布流效果（jQuery+flex）
瀑布流原理:是一种常见的网页布局方式,它的特点是将内容以多列的形式呈现,每一列的内容高度不固定,根据内容的大小自适应调整,从而形成了像瀑布一样的流动效果. 瀑布流的实现原理涉及到数据加 ...
《uni-app》移动端纯CSS实现不等高的瀑布流效果
<uni-app>移动端纯CSS实现不等高的瀑布流效果前言示例 WEB端示例移动端示例瀑布流实现第一种: flex 核心代码实现缺点完整代码第二种:column-coun ...
wpf 客户端【JDAgent桌面助手】开发详解（三）瀑布流效果实现与UI虚拟化优化大数据显示...
目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口圆形菜单... wpf 客 ...

vue环境简单实现动态瀑布流效果

vue环境简单实现动态瀑布流效果

vue环境简单实现动态瀑布流效果相关推荐

最新文章

热门文章