如何画一个网格

问题描述

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

实现思路

页面结构

页面结构分为三层

数据结构

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

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

样式

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

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

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

相关推荐
又又呢10 分钟前
前端面试题总结——webpack篇
前端·webpack·node.js
dog shit1 小时前
web第十次课后作业--Mybatis的增删改查
android·前端·mybatis
我有一只臭臭1 小时前
el-tabs 切换时数据不更新的问题
前端·vue.js
七灵微1 小时前
【前端】工具链一本通
前端
Nueuis2 小时前
微信小程序前端面经
前端·微信小程序·小程序
_r0bin_5 小时前
前端面试准备-7
开发语言·前端·javascript·fetch·跨域·class
IT瘾君5 小时前
JavaWeb:前端工程化-Vue
前端·javascript·vue.js
potender5 小时前
前端框架Vue
前端·vue.js·前端框架
站在风口的猪11085 小时前
《前端面试题:CSS预处理器(Sass、Less等)》
前端·css·html·less·css3·sass·html5
程序员的世界你不懂6 小时前
(9)-Fiddler抓包-Fiddler如何设置捕获Https会话
前端·https·fiddler