javascript - 要素rectが同じクラスの別の要素にヒットしているかどうかを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にしました。しかし、問題はまだ最適な座標を見つけるために不確かな数のループが必要であるため、ループに制限を設けているため、オーバーラップが数回発生します。