编程 一个简单的瀑布流布局实现方法,使用Vue3和Vite技术

2024-11-19 09:50:45 +0800 CST views 1150

一个简单的瀑布流布局实现方法,使用Vue3和Vite技术

背景

在工作中,我们常常需要实现瀑布流布局。今天,我将分享一个简单的实现方法,供大家参考。

技术

  • Vue 3
  • Vite

HTML

<template>
  <div>
    <button @click="addCard">增加</button>
    <div class="card">
      <div class="card-list"
           v-waterfall
           v-for="(item,index) in list" 
           :key="index"
           :style="{backgroundColor:item.color,height:item.height}">
        <p class="text"> {{ index }} </p>
      </div>
    </div>
  </div>
</template>

CSS

注意:由于在JS中使用了transform,所以需要设置定位。

.card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 700px;
}
.card-list {
  position: absolute;
  width: 200px;
}

JS

实现逻辑

  1. 声明一个高度数组,保存每列的高度。
  2. 获取最小高度的位置,方便定位。
  3. 自定义指令:v-waterfall,在mounted中获取DOM元素。
import { onMounted, ref, nextTick } from "vue";

const list = ref([
  {color:'#76da6e', height:'100px'},
  {color:'#40a988', height:'70px'},
  {color:'#2384c4', height:'120px'},
  {color:'#106ba3', height:'80px'},
  {color:'#0a589e', height:'110px'},
  {color:'#0a4e98', height:'90px'},
  {color:'#09408c', height:'100px'},
  {color:'#083680', height:'130px'},
]);
const tabulationHeights = ref([0, 0, 0, 0]);

const updateLayout = (el) => {
  const columns = getMinTabulationHeight(tabulationHeights.value);
  const top = tabulationHeights.value[columns];
  const left = columns * el.clientWidth;
  el.style.transform = `translate(${left}px,${top}px)`;
  tabulationHeights.value[columns] += el.offsetHeight;
}

const getMinTabulationHeight = (arr) => {
  let min = Math.min(...arr);
  return arr.indexOf(min) !== -1 ? arr.indexOf(min) : 0;
}

const vWaterfall = {
  mounted: (el) => {
    updateLayout(el);
  },
  updated: (el) => {
    // updateLayout(el);
  }
}

// 增加卡片
const addCard = () => {
  const height = Math.floor(Math.random() * 50 + 100);
  const color = '#' + Math.floor(Math.random() * 16777215).toString(16);
  list.value.push({color, height: height + 'px'});
}

问题与处理

有朋友可能会问:列表之间肯定不会没有间隔吧?这很简单。如果要封装一个组件,只需传递一个GAP值,参与计算即可:

const updateLayout = (el) => {
  const columns = getMinTabulationHeight(tabulationHeights.value);
  const top = tabulationHeights.value[columns] + 20; // 加上间隔
  const left = (columns * el.clientWidth) + (columns * 20); // 加上间隔
  el.style.transform = `translate(${left}px,${top}px)`;
  tabulationHeights.value[columns] += el.offsetHeight + 20; // 更新高度
}

总结

以上只是一个简单的模板,大家可以在此基础上进行优化,以满足自己的需求。今天的分享就到这里,如果觉得不错,请收藏这个源码库,后续会更新插件库!

复制全文 生成海报 前端开发 Web设计 Vue框架

推荐文章

Hypothesis是一个强大的Python测试库
2024-11-19 04:31:30 +0800 CST
回到上次阅读位置技术实践
2025-04-19 09:47:31 +0800 CST
使用Vue 3实现无刷新数据加载
2024-11-18 17:48:20 +0800 CST
JS中 `sleep` 方法的实现
2024-11-19 08:10:32 +0800 CST
php curl并发代码
2024-11-18 01:45:03 +0800 CST
Vue3中如何进行错误处理?
2024-11-18 05:17:47 +0800 CST
Vue中的异步更新是如何实现的?
2024-11-18 19:24:29 +0800 CST
JavaScript设计模式:桥接模式
2024-11-18 19:03:40 +0800 CST
Vue3中如何处理WebSocket通信?
2024-11-19 09:50:58 +0800 CST
JavaScript中的常用浏览器API
2024-11-18 23:23:16 +0800 CST
html夫妻约定
2024-11-19 01:24:21 +0800 CST
Vue3中如何处理组件的单元测试?
2024-11-18 15:00:45 +0800 CST
windon安装beego框架记录
2024-11-19 09:55:33 +0800 CST
Vue3中的v-for指令有什么新特性?
2024-11-18 12:34:09 +0800 CST
Nginx 如何防止 DDoS 攻击
2024-11-18 21:51:48 +0800 CST
在JavaScript中实现队列
2024-11-19 01:38:36 +0800 CST
Gin 与 Layui 分页 HTML 生成工具
2024-11-19 09:20:21 +0800 CST
程序员出海搞钱工具库
2024-11-18 22:16:19 +0800 CST
Rust 高性能 XML 读写库
2024-11-19 07:50:32 +0800 CST
程序员茄子在线接单