vue 瀑布流组件实现

这个需求做不了123

已于 2023-12-20 14:04:06 修改

阅读量1.4k

点赞数 9

分类专栏： vue 文章标签：前端 vue.js javascript

于 2022-09-17 17:58:14 首次发布

本文链接：https://blog.csdn.net/weixin_54145360/article/details/126908110

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近项目要实现一个瀑布流布局，结合网上的案例以及自己的理解实现了一版，特在此记录一下，有兴趣的同学欢迎一起探讨交流学习 (第一次写这种东西~~~)，废话不多说，开整！！！！！

先上张图！！！

【必看】原理：

说一下我对瀑布流布局原理的理解，如上图，实现这种布局方式，主要有绝对定位方式以及两列布局方式，原理都是通过判断每列高度差来做，重新处理数据，动态获取每列元素盒子高度，每次往盒子高度小的那列push数据，绝对定位方式，通过找到最小高度的列，设置元素的 left top值来做，但是这种方式有个缺点是，由于子元素绝对定位导致父元素高度塌陷，如果我们需要获取父元素高度做一些事情的话，可能不太好处理，所以我这里使用 float 两列布局（两列是一个概数，当然你可以设置5 6 7 8 列）

步骤一：

html css 直接上代码

<template>
  <!-- 运用float 布局，多列数组方式，如果用绝对定位布局，会使父元素高度塌陷，使用不方便 -->
	<div class="waterfall clearfix">
		<div class="list" v-for="(columnList,i) in newList" :key="i" ref="waterfall">
      <slot name="content" :item="columnList"></slot>
    </div>
	</div>
</template>


<style scoped lang="less">
.waterfall {
  .list {
    float: left;
    &:last-child {
      margin-right: 0 !important;
    }
  }
}

.clearfix::after{
  content:'';
  display:block;
  clear:both;
}
</style>

步骤二：

样式处理好了后，就该我们处理数据了

首先加载瀑布流组件的时候，动态创建二维数组，并且给每列数组添加一条数据，（我觉得这样好理解，每列里有了数据，也就能获取到每列的dom元素，也就能获取到高度差）

export default {
	name: 'waterfall',
	props: {
    list: {
      type: Array,
      default: []
    },
    marginRight: {
      type: Number,
      default: '0'
    }
  },
  data() {
    return {
      column: 2,
      newList: [],
    }
  },
  created() {
    // 循环列数，给每一列先添加一条数据，那两列就有高度了，也能利用高度差进行判断
    if(this.list.length > 1) {
      for(let i = 0; i< this.column;i++) {
        // 此处需要用$set 创建二维数组
        this.$set(this.newList,i,[])
        this.newList[i][0] = this.list.shift()
      }
    }else {
      this.$set(this.newList,0,[])
      this.newList[0][0] = this.list.shift()
    }
    
  },
}

步骤三：

处理父组件传过来的数据，动态的push到两列数组中

init() {
      let domHeight = [] // 存放高度得数组
      let waterfallDom = this.$refs.waterfall

      waterfallDom.forEach((item)=>{
        domHeight.push(item.offsetHeight)
        item.style.marginRight = this.marginRight
      })
      let minHeight = Math.min(...domHeight); // 获取到最小高度
      let index = domHeight.findIndex(item => item === minHeight) // 获取到最小高度得下标
      if(this.list.length) {
        // 给最小高度得数组里添加数据
        this.newList[index].push(this.list.shift())
      }
    }

步骤四：

每次调用步骤三中的方法动态的处理父组件传过来的数据，我这里用的监听

watch: {
    // 这里要用 $nextTick 元素渲染完成 再次调用方法重新获取高度 push数据
    list(val) {
      console.log(val,'增加了嘛');
      this.$nextTick(()=>{
        this.init()
      })
    }
  },

完结：撒花！！！

奥！完整代码附上！ps：这里没有处理图片，瀑布流最重要的是图片高度的自适应，由于图片加载有延迟，影响获取dom元素的高度，所以最完美的是服务端把图片高度返回，提前设置子元素图片高度占位，这样就完美了！！！！（完整代码组件可以直接拿来使用）

<waterfall :list="item.items" marginRight="9px">
   <template  #content="list">
      <goods :obj="val" v-for="(val,s) in list.item" :key="s" ></goods>
   </template>
</waterfall>

<template>
  <!-- 运用float 布局，多列数组方式，如果用绝对定位布局，会使父元素高度塌陷，使用不方便 -->
	<div class="waterfall clearfix">
		<div class="list" v-for="(columnList,i) in newList" :key="i" ref="waterfall">
      <slot name="content" :item="columnList"></slot>
    </div>
	</div>
</template>

<script>
export default {
	name: 'waterfall',
	props: {
    list: {
      type: Array,
      default: []
    },
    marginRight: {
      type: Number,
      default: '0'
    }
  },
  data() {
    return {
      column: 2,
      newList: [],
    }
  },
  created() {
    // 循环列数，给每一列先添加一条数据，那两列就有高度了，也能利用高度差进行判断
    // 这里写的不好，有需要的同学自己优化吧
    if(this.list.length > 1) {
      for(let i = 0; i< this.column;i++) {
        // 此处需要用$set 创建二维数组
        this.$set(this.newList,i,[])
        this.newList[i][0] = this.list.shift()
      }
    }else {
      this.$set(this.newList,0,[])
      this.newList[0][0] = this.list.shift()
    }
    
  },
  watch: {
    // 这里要用 $nextTick 元素渲染完成 再次调用方法重新获取高度 push数据
    list(val) {
      // console.log(val,'增加了嘛');
      this.$nextTick(()=>{
        this.init()
      })
    }
  },
	methods: {
		init() {
      let domHeight = [] // 存放高度得数组
      let waterfallDom = this.$refs.waterfall

      waterfallDom.forEach((item)=>{
        domHeight.push(item.offsetHeight)
        item.style.marginRight = this.marginRight / 3.75+ 'vw'
      })
      let minHeight = Math.min(...domHeight); // 获取到最小高度
      let index = domHeight.findIndex(item => item === minHeight) // 获取到最小高度得下标
      if(this.list.length) {
        // 给最小高度得数组里添加数据
        this.newList[index].push(this.list.shift())
      }
    }
	}
}
</script>

<style scoped lang="less">
.waterfall {
  .list {
    float: left;
    margin-right: 9px;
    &:last-child {
      margin-right: 0 !important;
    }
  }
}

.clearfix::after{
  content:'';
  display:block;
  clear:both;
}
</style>