请问如何实现多个div元素随机放置，但两两元素之间保持一定距离

img


如图所示，已实现多个div元素位置随机放置，可是如何实现他们不相互重叠，望赐教。
以下为完整代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>祝福墙</title>
</head>
<style>
    * {
        padding: 0;
        margin:0;
    }
    body {

        background-repeat: no-repeat;
        background:url("./墙.jpg");
    }

    .note {
        position: absolute;
        background: url("./纸2.png") no-repeat;
        background-size:100% 100%;
        width: 50vw;
        height: 30vw;
    }

    span {
        display: block;
    }

    .noteHeader {
        padding-right: 7vw;
        float: right;
        padding-top: 6vw;
    }


    .noteHeader s {
        text-decoration: none;
        position: absolute;

        text-align: center;

        cursor: pointer;
    }

    div.noteContent {
        overflow: hidden;
        line-height: 2vw;
        position: relative;
        top: 8vw;
        left: 12vw;
        font-size: 2vw;

    }





    div.noteName{
        color: #C0F;
        position: relative;
        float: right;
        top: 21vw;
        font-size: 1.5vw;
    }


</style>
<body>
    <div class="content">
       content
    </div>


<script>
    //模拟数据库，获取信息
    var messages = [
        {"id": 1, "name": "mahu", "content": "今天你拿苹果支付了么", "time": "2016-02-17 00:00:00"},
        {"id": 2, "name": "haha", "content": "今天天气不错，风和日丽的", "time": "2016-02-18 12:40:00"},
        {"id": 3, "name": "jjjj", "content": "常要说的事儿是乐生于苦", "time": "2016-03-18 12:40:00"},
        {"id": 4, "name": "9.8的妹纸", "content": "把朋友家厕所拉堵了 不敢出去 掏了半小时了都", "time": "2016-03-18 12:40:00"},
        {"id": 5, "name": "雷锋ii.", "content": "元宵节快乐", "time": "2016-02-22 12:40:00"},
        {"id": 6, "name": "哎呦哥哥.", "content": "据说今晚央视的元宵晚会导演和春晚导演是同一个人，真是躲得过初一，躲不过十五。", "time": "2016-02-22 01:30:00"},
        {
            "id": 7,
            "name": "没猴哥，不春晚",
            "content": "班主任:“小明，你都十二岁了，还是三年级，不觉得羞愧吗”？。小明:“一点也不觉得，老师你都四十多岁了，不也是年年在三年级混日子吗？羞愧的应该是你”。老师:……",
            "time": "2016-02-22 01:30:00"
        },
        {"id": 8, "name": "哎呦杰杰.", "content": "真搞不懂你们地球人，月亮有什么好看的，全是坑，还是对面那哥们好看，", "time": "2016-02-22 01:30:00"},
        {"id": 9, "name": "哎呦哎呦", "content": "今天哪里的烟花最好看！！？答：朋友圈。。。", "time": "2016-02-22 02:30:00"}
    ];
    var content = document.getElementsByClassName("content")[0];

    for (var i = 0; i < messages.length; i++) {

        content.innerHTML+=



            '<div class="note">' +


                '<div class="noteHeader">' +
                    '<s><img src="关闭32.svg" alt="关闭" width="24vw" height="24vw"></s>' +
                    // '<span>' + messages[i].time + '</span>' +

                '</div>' +

                '<div class="noteContent">' + messages[i].content + '</div>' +

                '<div class="noteName">' +messages[i].name+'</div>' +


        '</div>';
    }
    var divEles = content.children;
    var zIndexValue = 0;
    for (var i = 0; i < divEles.length; i++) {
        divEles[i].style.top = randomTop() + "vw";
        divEles[i].style.left = randomLeft() + "vw";
        divEles[i].onclick = function () {
            zIndexValue++;
            this.style.zIndex = zIndexValue;
        }
        var closeEle = divEles[i].getElementsByTagName("s")[0];
        closeEle.onclick = function () {
            content.removeChild(this.parentNode.parentNode);
        }
    }

    function randomTop() {
        return parseInt(Math.random() * (150 - 10)+10);
    }

    function randomLeft() {
        return parseInt(Math.random() * (+50 - +5) + +5);
        // return parseInt(Math.random() * (96 - 40));
    }
</script>
</body>
</html>

我提供的思路是绝对定位控制item的left和top，然后通过计算宽高去判断重叠，重叠则重新生成随机的left和top继续判断直到不重叠
解答不易，有帮助请采纳


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <style>
    #box {
      width: 500px;
      height: 700px;
      background-color: aqua;
      position: relative;
    }
    .item {
      width: 150px;
      height: 100px;
      background-color: red;
      border-radius: 20px;
      position: absolute;
    }
  </style>
  <body>
    <div id="box">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
  <script>
    const test = () => {
      //将没有数组方法的类数组转化为真数组
      const arr = [].slice.apply(document.getElementsByClassName("item"));
      //memo用于记忆xy,判断重叠
      const memo = [];
      arr.map((item) => {
        let x, y;
        let flag = true;

        //循环生成新的xy进行重叠判断
        while (flag) {
          //isOk判断是否重叠
          let isOk = true;
          x = Math.random() * 500 - 150; //容器宽-item宽
          y = Math.random() * 700 - 100; //容器高-item高

          //防止出现负数
          x = x > 0 ? x : 0;
          y = y > 0 ? y : 0;
          if (memo.length) {
            memo.forEach((me) => {
              const { mex, mey } = me;
                                  //item宽                      item高
              if (Math.abs(x - mex) < 150 && Math.abs(y - mey) < 100) {
                isOk = false;//出现宽高绝对值同时小于item宽高说明重叠了,不ok
              }
            });
          } else {
            //记忆数组为空说明第一个item的xy可以直接用,不用判断重叠了,跳出循环
            memo.push({ mex: x, mey: y });
            flag = false;
          }
           //ok的话把不重叠的xy加进记忆数组,并将flag置为false跳出循环
           //不ok则继续循环一个新的xy出来看看能不能用
           //memo.length用来防止和记忆数组特殊情况为空重叠
          if (isOk && memo.length) {
            memo.push({ mex: x, mey: y });
            flag = false;
          }
        }
        item.style.top = y + "px";
        item.style.left = x + "px";
      });
    };
    test();
  </script>
</html>

img

通过两个div重叠，从分析、解决方法、图文解决等方式CSS5介绍让div不重叠方法。
1.都设置浮动，
2.都不设置浮动。
3.一个浮动，另一个设置margin