HTML布局之Grid模拟房间方位布局，显示摄像头等设备图标

---

前言

最近项目中需要显示房间中某些设备的位置信息，并用图标表示出来。调查了一番后决定使用Grid布局来实现。
效果如下图所示：

一、设计

1.1 布局设计

多次尝试后，发现将房间分为4行4列显示效果较为合适。

1.1.1 初始设计

给每一个位置分配一个ID（如 1：上左角 2：上左边 3：上边 4：上右边 5：上右角 6：左上边 7：左边 8：左下边 9：右上边 10：右边 11：右下边 12：下左角 13：下左边 14：下边 15：下右边 16：下右角）

// 房间布局设计
 -----------------------------------
 上左角---上左边---上边---上右边---上右角
 -----                         -----
 左上边                         右上边
 -----                         -----
 左 边           房间名          右 边
 -----                         -----
 左下边                         右下边
 -----                         -----
 下左角---下左边---下边---下右边---下右角
 -----------------------------------

二、转变为布局

效果：

代码：
roomId为自己定义的字符（‘room-1001-’）

<div class="box">
      <span class="title">房间名称</span>
      <div class="top">
        <div class="item">
          <div :id="roomId + `1`">上左角</div>
        </div>
        <div class="item">
          <div :id="roomId + `2`">上左边</div>
        </div>
        <div class="item">
          <div :id="roomId + `3`">上边</div>
        </div>
        <div class="item">
          <div :id="roomId + `4`">上右边</div>
        </div>
        <div class="item">
          <div :id="roomId + `5`">上右角</div>
        </div>
      </div>
      <div class="left">
        <div class="item">
          <div :id="roomId + `6`">左上边</div>
        </div>
        <div class="item">
          <div :id="roomId + `7`">左边</div>
        </div>
        <div class="item">
          <div :id="roomId + `8`">左下边</div>
        </div>
      </div>
      <div class="right">
        <div class="item">
          <div :id="roomId + `9`">右上边</div>
        </div>
        <div class="item">
          <div :id="roomId + `10`">右边</div>
        </div>
        <div class="item">
          <div :id="roomId + `11`">右下边</div>
        </div>
      </div>
      <div class="bottom">
        <div class="item">
          <div :id="roomId + `12`">下左角</div>
        </div>
        <div class="item">
          <div :id="roomId + `13`">下左边</div>
        </div>
        <div class="item">
          <div :id="roomId + `14`">下边</div>
        </div>
        <div class="item">
          <div :id="roomId + `15`">下右边</div>
        </div>
        <div class="item">
          <div :id="roomId + `16`">下右角</div>
        </div>
      </div>
    </div>

CSS：

.box {
    width: 400px;
    height: 400px;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    position: relative;

    .title {
      position: absolute;
      cursor: pointer;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      top: 50%;
      left: 0;
      right: 0;
      text-align: center;
      margin: 0 25%;
      padding: 20% 10%;
      font-size: 1em;
      letter-spacing: 0.1em;

      .gear-size {
        width: 1.1em;
        height: 1.1em;
      }
    }

    .top {
      display: grid;
      text-align: center;
      height: 15%;
      grid-template-columns: 2rem 2fr 1fr 2fr 2rem;
      grid-gap: 5px 5px;

      .item {
        display: flex;
        justify-content: center;
        align-items: start;
      }

      .gear-size {
        width: 1.1em;
        height: 1.1em;
      }
    }

    .left {
      display: grid;
      float: left;
      vertical-align: middle;
      margin: 5px 0px;
      width: 2rem;
      height: 67.5%;
      grid-template-rows: repeat(3, 1fr);
      grid-gap: 5px 5px;

      .item {
        display: flex;
        align-items:center;
      }

      .gear-size {
        width: 1.1em;
        height: 1.1em;
      }
    }

    .right {
      display: grid;
      text-align: right;
      float: right;
      margin: 5px 0px;
      width: 2rem;
      height: 67.5%;
      grid-template-rows: repeat(3, 1fr);
      grid-gap: 5px 5px;

      .item {
        display: flex;
        justify-content: right;
        align-items:center;
      }

      .gear-size {
        width: 1.1em;
        height: 1.1em;
      }
    }

    .bottom {
      display: grid;
      text-align: center;
      clear: both;
      height: 15%;
      grid-template-columns: 2rem 2fr 1fr 2fr 2rem;
      grid-gap: 5px 5px;

      .item {
        display: flex;
        justify-content: center;
        align-items: end;
      }

      .gear-size {
        width: 1.1em;
        height: 1.1em;
      }
    }
  }

  .item {
    font-size: 14px;
    // border: 1px solid #DCDFE6;
  }

三、添加文字效果

HTML代码：

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div class="box" id="room-1001">
            <div class="top">
                <div class="item">
                    <div id="room-1001-1">上左角</div>
                </div>
                <div class="item">
                    <div id="room-1001-2">上左边</div>
                </div>
                <div class="item">
                    <div id="room-1001-3">上边</div>
                </div>
                <div class="item">
                    <div id="room-1001-4">上右边</div>
                </div>
                <div class="item">
                    <div id="room-1001-5">上右角</div>
                </div>
            </div>
            <div class="left">
                <div class="item">
                    <div id="room-1001-6">左上边</div>
                </div>
                <div class="item">
                    <div id="room-1001-7">左边</div>
                </div>
                <div class="item">
                    <div id="room-1001-8">左下边</div>
                </div>
            </div>
            <div class="right">
                <div class="item">
                    <div id="room-1001-9">右上边</div>
                </div>
                <div class="item">
                    <div id="room-1001-10">右边</div>
                </div>
                <div class="item">
                    <div id="room-1001-11">右下边</div>
                </div>
            </div>
            <div class="bottom">
                <div class="item">
                    <div id="room-1001-12">下左角</div>
                </div>
                <div class="item">
                    <div id="room-1001-13">下左边</div>
                </div>
                <div class="item">
                    <div id="room-1001-14">下边</div>
                </div>
                <div class="item">
                    <div id="room-1001-15">下右边</div>
                </div>
                <div class="item">
                    <div id="room-1001-16">下右角</div>
                </div>
            </div>
        </div>
    </body>
</html>

3.1 替换图标效果

替换为图标函数：
ImageWrapper为自己封装的一个图标组件。
本方法的重点在将布局中的如id为“room-1001-8”的div通过Vue的$mount()方法挂载为想要替换的组件。

showDev(devList) {
      for (let index = 0; index < devList.length; index++) {
        const dev = devList[index]
        const name = this.roomId + dev.id
        const room = document.getElementById(name)
        // 监控
        if (dev.type === this.$const.deviceType.CCTV) {
          const id = 'icon-node-' + index
          const ImageWrapper = Vue.extend(imageWrapper)
          this.curDetail = new ImageWrapper({
            propsData: {
              src: this.cctvIcon,
              id: id
            }
          }).$mount(room)
        }
        // 温湿度仪
        if (dev.type === this.$const.deviceType.TEMHUM) {
          const ImageWrapper = Vue.extend(imageWrapper)
          this.curDetail = new ImageWrapper({
            propsData: {
              src: this.tempIcon
            }
          }).$mount(room)
        }
        // γ射线检测仪
        if (dev.type === this.$const.deviceType.RAYDTC) {
          const ImageWrapper = Vue.extend(imageWrapper)
          this.curDetail = new ImageWrapper({
            propsData: {
              src: this.radioIcon
            }
          }).$mount(room)
        }
      }
    }

四、其他

上面的布局效果可以使用函数动态生成。

initRoomLayout(lab) { // 初始化房间方法
      // const lab = this.$refs.room
      const box = lab.appendChild(document.createElement('div'))
      box.className = 'box '
      box.id = 'room-1001'

      const title = box.appendChild(document.createElement('span'))
      title.className = 'title'

      const top = box.appendChild(document.createElement('div'))
      top.className = 'top'
      for (let index = 1; index <= 5; index++) {
        const item = top.appendChild(document.createElement('div'))
        item.className = 'item'
        const div = item.appendChild(document.createElement('div'))
        // 设置ID
        div.id = box.id + '-' + index
      }

      const left = box.appendChild(document.createElement('div'))
      left.className = 'left'
      for (let index = 6; index <= 8; index++) {
        const item = left.appendChild(document.createElement('div'))
        item.className = 'item'
        const div = item.appendChild(document.createElement('div'))
        // 设置ID
        div.id = box.id + '-' + index
      }

      const right = box.appendChild(document.createElement('div'))
      right.className = 'right'
      for (let index = 9; index <= 11; index++) {
        const item = right.appendChild(document.createElement('div'))
        item.className = 'item'
        const div = item.appendChild(document.createElement('div'))
        // 设置ID
        div.id = box.id + '-' + index
      }

      const bottom = box.appendChild(document.createElement('div'))
      bottom.className = 'bottom'
      for (let index = 12; index <= 16; index++) {
        const item = bottom.appendChild(document.createElement('div'))
        item.className = 'item'
        const div = item.appendChild(document.createElement('div'))
        // 设置ID
        div.id = box.id + '-' + index
      }
    }

注：本文介绍重点为实现思路。