vue 封装瀑布流

最新推荐文章于 2025-02-20 10:53:14 发布

阿狸lyinshaofeng

最新推荐文章于 2025-02-20 10:53:14 发布

阅读量1.3k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/lyinshaofeng/article/details/127542331

版权

这是一个使用Vue.js封装的瀑布流方法，通过调整列数、间距和父元素宽度，实现动态瀑布流布局。在组件中引入并应用该方法，通过获取数据并渲染列表，结合$nextTick在DOM渲染后调用水瀑布流功能，实现了内容的瀑布流展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

utils/waterfall.js

/**
* @description 瀑布流方法
* @param {String} selector = [.item] 瀑布流的选择器
* @param {Number} column = [2] 栏的数量,默认2列
* @param {Number} gap = [10] 栏间距
* @param {document|HTMLElement} = [document] 瀑布流参照父节点
*/
function waterFall(selector=".item",column=2,gap=10,parent=document){
               // 分两栏
               // var column = 2;
               // 间距
               // var gap = 10;
               // 列宽一列的宽度(动态计算间距)
               var width = window.innerWidth;
               if(parent!=document){
                   parent.style.position ="relative";
                   width = parent.offsetWidth;
               }
               var colWidth = (width-(column+1)*gap)/column;
               // 数组存储高度（记录最小高都