javascript检查元素rect是否使用相同的类命中另一个

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，看它是否有效。但问题仍然是需要不确定数量的循环才能找到最佳坐标，所以我仍然对循环施加限制，因此重叠仍然会发生几次。