使用Gird布局实现瀑布流效果

之前在插件里做了一个收藏夹和生词本的需求,大概长下面这样,里面的数据是按照瀑布流去做展示的

一、纯css也很好用

瀑布流布局一般的解决方案都是使用js去做动态计算内容高度,然后把内容分配给最短的'管道',实现调补的效果,但是纯js计算起来太费事了

在我逛了一圈百度后,发现css的gird布局完全可以实现瀑布流效果,可以减少很多计算

二、强大的gird

因为之前也没怎么使用grid,都是现查的,详细的可以看看这篇文章

gird是二维的布局,支持同时设置两个方向的数据,包括内容占比、间距等等,这样就很好办事了。我们可以直接设置'管道'的数量,内容动态去设置格子占比即可

话不多说,先封装容器组件 <WaterFall />

1.模板和参数

模板上,我们只要弄好容器就好了,里面展示什么内容不需要关心,直接用slot就好了

参数不需要支持太多,配置下面的就够了

  • col:管道的数量
  • colGap:管道的列间距
  • girdRowHeight:每一个网格的高度
  • rowGap:内容间行间距
vue 复制代码
<template>
  <div class="waterfall-wrapper" ref="waterfallRef" :style="wrapperStyle">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
    col: {
      type: Number,
      default: 3
    },
    colGap: {
      type: Number,
      default: 20
    },
    girdRowHeight: {
      type: Number,
      default: 5
    },
    rowGap: {
      type: Number,
      default: 20
    }
})
</script>

<style leng="scss" scoped>
.waterfall-list-wrapper {
  display: grid;
  align-items: start;
}
</style>
4.容器的配置style
vue 复制代码
const wrapperStyle = computed(() => {
    return {
        // 需要多少列,每一列均分空间
        'grid-template-columns': `repeat(${props.col}, 1fr)`,
        
        // 隐式网格的高度
        'grid-auto-rows': `${props.girdRowHeight}px`
    }
})
4.动态计算内容占比
vue 复制代码
const waterfallRef = ref(null)
const updateList = () => {
    const els = Array.from(waterfallRef.value.children)
    els.forEach((el: any) => {
        // 内容占用的网格数
        const contentRows = Math.ceil(el.clientHeight / props.girdRowHeight)
        // 间距占用的网格数
        const gapRows = Math.ceil(props.rowGap / props.girdRowHeight)
    
        const rows = contentRows + gapRows
        
        // 上边框自适应
        el.style.girdRowStart = 'auto'
        
        // 设置下边框为跨度 rows 个网格的大小
        el.style.girdRowEnd = `span ${rows}`
    })
}

执行updateList,就可以实现瀑布流布局,如果有改变内容高度的操作,在操作完成后,再执行一遍updateList即可

三、总结一下

使用gird布局去实现瀑布流的重点在于,预设好隐式网格的高度,计算出内容占用的网格数,再给gird的元素设置上gird-row即可

相关推荐
excel8 分钟前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼3 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping3 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙4 小时前
[译] Composition in CSS
前端·css
白水清风4 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix4 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278004 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端4 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧4 小时前
Promise 的使用
前端·javascript