瀑布流思路以及简单实现和组件封装代码(Nuxt3)

做一个程序员

已于 2023-06-26 22:58:18 修改

阅读量468

点赞数

分类专栏： Nuxt3 文章标签：前端 javascript 开发语言

于 2023-06-26 22:54:21 首次发布

本文链接：https://blog.csdn.net/weixin_52153452/article/details/131406887

版权

瀑布流思路以及简单实现和组件封装代码

个人博客同步地址: https://yujiezhang.space/blob/waterflow

根据屏幕分辩率分为三种（可根据需求来变化）
- lg-1024px 三栏分布
- md-768px 两栏分布
- sm-640px 单栏分布
根据宽度来自动适配高度（纵横比来控制）
如果说提前知道图片宽高的话，可以根据纵横比来进行页面的宽度控制，并且保证每一次的插入都是先找到最低的那个元素再进行插入图片。瀑布流的元素宽度一般都是固定的，只是高度不同，我们可以根据高度的不同，每次插入图片到最低的那一个地方。
示例代码（如下）：

if (dataLength < activeCol.value) {
   
    for (let index = 0; index < dataLength; index++)
      arr[index].push(lifeDataList.value[index])
  }
  else {
   
    lifeDataList.value.forEach((item, index) => {
   
      if (index <= activeCol.value - 1) {
   
        arr[index].push(item)
        remHeight[index] += item.reverseRatio
      }
      else {
   
        const idx = arrFindNum(remHeight)
        if (arr[idx]) {
   
          arr[idx].push(item)
          remHeight