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

心悦琴
  • 56

811605ba2ecadc1276d4b8fc58be6d51_resize,w_320,m_lfit.png
如图所示,已实现多个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>
 

不胜感激,请赐教。

回复
阅读 246
1 个回答

碰撞检测,可以是动态的。

圆的碰撞检测就是圆心求两点距离。

矩形的话四个顶点是否有交际。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏