如何画一个网格

问题描述

做一个类似这种,网格中多个相邻的单元格可以合并成一个大的矩形

实现思路

页面结构

页面结构分为三层

数据结构

还需要维护一个整个网格系统的二维占用数组,如果这个单元格被占了(不管是单独的一个矩形还是包含在了某个大矩形之中),那么这个位置就填上1

fillArr长这样:fillArr: [[0, 0, 1, 1], [0, 2, 0, 3], [0, 4, 3, 4]],

样式

把容器写成realtive,然后所有的矩形、线(其实就是很窄的矩形)都是计算好位置后再absolute放上去

根据二维占用数组,判断自己的周围有没有矩形,从而决定线是横着放还是竖着放

可以把所有线的样式保存到一个数组里面,然后再统一渲染

相关推荐
ssshooter11 分钟前
小程序分包页面报 "has not been registered yet" 的隐蔽根因:一个动态 import 拖垮整个分包
前端·javascript·微信小程序
鹏多多31 分钟前
Web浏览器后台离线通知方案实现以及兼容指南
前端·javascript·vue.js
yangmu320333 分钟前
Vue3 响应式系统深度解析:从 Proxy 到依赖追踪
前端·javascript·vue.js
还有多久拿退休金42 分钟前
AI 写了代码,谁替你"试毒"?
前端·架构·ai编程
大E帝国子民143 分钟前
OpenCloudOS Server 9 安装 Nginx 完整指南
前端·网络·nginx
少年白马醉春风丶1 小时前
【AI Agent面试题】Agent 的自主性分级,怎么理解?
前端
yingyima1 小时前
Docker Compose 紧急救援:凌晨3点服务器报警的解决方案
前端
石小石Orz2 小时前
星云SDK + 油猴:给LLM塑造肉身,陪伴你在每个网页
前端·人工智能
2601_963771372 小时前
10 Best PHP Media CMS and Scripts for Web Creators in 2026
开发语言·前端·php
VaJoy2 小时前
全面革新⚡️ Vue 3.6 项目工程的基础实现
前端·vue.js