javascript - javascript检查元素矩形是否击中另一个具有相同类的元素

Question

我想<img class="anger">在容器内放置 30 个随机大小和随机位置的元素<div>，但没有.anger一个相互碰撞。

可能吗？

到目前为止，这是我的代码：

function loadAngers() {
    var wrp = '#angerContainer'; //the container
    var rectAvatar = $('#picAvatar')[0].getBoundingClientRect(); //rect of user avatar
    var rectWrapper = $(wrp)[0].getBoundingClientRect(); //rect of container
    listCoorditaes = [[
        rectAvatar.width,
        (rectAvatar.left+rectAvatar.right)/2,
        (rectAvatar.top+rectAvatar.bottom)/2
    ]];
    $(wrp).find('.anger').remove();
    for (var i=0; i<listAnger.length; i++) {
        var verb = listAnger[i].replace('assets/img/verb/','').replace('.png','').replace('-',' ');
        var anger = $('<img src="'+listAnger[i]+'" class="anger hvr-'+getRandom(listAnim)+'" data-verb="'+verb+'" style="position:absolute">');
        var paddingX = 100;
        var paddingY = 200;
        var wideX = rectWrapper.width - paddingX;
        var wideY = rectWrapper.height - paddingY - rectAvatar.top;
        var width = Math.round(30 + Math.random() * 70);
        var left;
        var top;
        var x;
        var y;
        var tubrukan;
        var coba = 0;
        do { //find the best coordinate
            tubrukan = false;
            coba++;
            x = Math.round(Math.random() * wideX) + paddingX/2;
            y = Math.round(Math.random() * wideY) + paddingY/2 + rectAvatar.top;
            left = x - width/2;
            top = y - width/2;
            for (var j=0; j<=i; j++) {
                var cekW = listCoorditaes[j][0];
                var cekX = listCoorditaes[j][1];
                var cekY = listCoorditaes[j][2];
                var difX = Math.abs( x - cekX );
                var difY = Math.abs( y - cekY );
                if (difX < cekW && difY < cekW) {
                    tubrukan = true;
                    break;
                }
            }
        }
        while(tubrukan && coba<3); //as I give up for eternal loop, I limit the loop with 3 tries.
        listCoorditaes.push([width,x,y]);

        anger.css('width',width+'px');
        anger.css('left',left);
        anger.css('top',top);
        anger.appendTo(wrp);
    }
}

这是当前的结果：

正如我们所见，元素仍然相互重叠，因为我限制了循环。如果我取消限制，浏览器将忍受无限循环并变得没有响应。

你有其他更好的方法来实现它吗？

更新：

我的错，我将容器高度设置为 800px，这就是为什么它不能包含所有<img>没有重叠的东西，因此会发生永恒的循环。我把它调到 2000px 看看它是否有效。但是问题仍然是需要不确定的循环次数才能找到最佳坐标，所以我仍然对循环进行限制，因此重叠仍然会发生几次。