用html+css+jQuery制作一个简单的流程图/步骤图

首先在页面内需要呈现的区域创建一个容器，用来之后append新元素。
```
 <body>
    <div class="container"></div>
  </body>
```

获取需要的流程数据，我这里定义一个假数据。

var arr = ["前处理生产指令", "前处理", "批生产指令", "中间产品递交单", "阿胶提取粗滤", "胶液分离浓缩", "总混", "流程1", "流程2", "流程3", "流程4", "流程5", "流程6", "流程7", "流程8", "流程9", "流程10", "流程11"];

jQuery部分，循环遍历数组，每遍历一次创建一个html片段，并插入当前行，这里做的if判断，每生成5个自动换行，然后继续插入。

// 循环生成步骤项
      $(arr).each(function (index, item) {
        // 第一个或者每循环6个，在尾部生成一行新的ul标签，也就是每5个一行
        if (index == 0 || index % 5 == 0) {
          $(".container").append("<ul></ul>");
        }
        // 生成固定的html片段$new
        var $new = $(`
          <div class="shell">
            <li>
              <div class="item">
                <span style="font-size: 36px;color: #0096ED;">${index + 1}</span>
                <p>${item}</p>
              </div>
            </li>
            <div class="content">
                  <button>文件上传11111111111111111111111111111<br>1<br>2<br>3</button>
            </div>
          </div>
        `);
        // 每遍历一次，就往当前文档中最后一个ul下的尾部添加进去一个$new
        $(`ul:last-of-type`).append($new);
        
        // 此处还需要放入虚线部分代码

       });

创建一条虚线，加在每个元素之前，如果元素在当前行第一位，则不加虚线。

// 创建一条虚线
        var $line = $(`<div class="line"></div>`);
        // 判断:如果是当前行第一个元素，元素前不加虚线，如果不是第一个，在元素前加虚线
        if (index % 5 != 0 && index > 0) {
          $new.before($line);
        }

第3步+第4步合并起来

$(function () {
      // 数据
      var arr = ["前处理生产指令", "前处理", "批生产指令", "中间产品递交单", "阿胶提取粗滤", "胶液分离浓缩", "总混", "流程1", "流程2", "流程3", "流程4", "流程5", "流程6", "流程7", "流程8", "流程9", "流程10", "流程11"];
      // 循环生成步骤项
      $(arr).each(function (index, item) {
        // 第一个或者每循环6个，在尾部生成一行新的ul标签，也就是每5个一行
        if (index == 0 || index % 5 == 0) {
          $(".container").append("<ul></ul>");
        }
        // 生成固定的html片段$new
        var $new = $(`
          <div class="shell">
            <li>
              <div class="item">
                <span style="font-size: 36px;color: #0096ED;">${index + 1}</span>
                <p>${item}</p>
              </div>
            </li>
            <div class="content">
                  <button>文件上传11111111111111111111111111111<br>1<br>2<br>3</button>
            </div>
          </div>
        `);
        // 每遍历一次，就往当前文档中最后一个ul下的尾部添加进去一个$new
        $(`ul:last-of-type`).append($new);
        // 创建一条虚线
        var $line = $(`<div class="line"></div>`);
        // 判断:如果是当前行第一个元素，元素前不加虚线，如果不是第一个，在元素前加虚线
        if (index % 5 != 0 && index > 0) {
          $new.before($line);
        }
      });
    });

CSS部分

      ul {
        display: flex;
      }
      li {
        display: flex;
        list-style: none;
        position: relative;
      }
      .item {
        width: 120px;
        height: 100px;
        text-align: center;
        position: relative;
        margin: 0 auto;
      }
      .line {
        border-bottom: 1px dashed rgba(3, 2, 2, 0.7);
        width: 120px;
        align-self: center;
        position: relative;
        top: -50px;
      }
      .shell {
        height: 200px;
        position: relative;
      }
      .content {
        width: 200px;
        height: 100px;
        text-align: center;
        position: absolute;
        left: -50%;
        margin-left: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

这是效果图：

这里的button按钮是我为了测试样式瞎写的，大家后面根据自己的需求更改。

这是一个非常简单明了的流程图，虽然有一点丑 :)

希望能帮到有需要的人，如果有问题可以给我留言 :)

用html+css+jQuery制作一个简单的流程图/步骤图

猜你喜欢