Проверка javascript, если элемент прямоугольный попадет в другой с тем же классом

Question

Я хочу поставить как 30 <img class="anger"> элементы со случайным размером и случайным положением внутри <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, чтобы увидеть, работает ли он. Но проблема в том, что для определения наилучшей координаты все еще требуется неопределенное количество циклов, поэтому я все же установил предел для цикла, поэтому перекрытие по-прежнему происходит несколько раз.