随机显示div

Question

我需要在代码中implement这个。圈子是divs。 divs必须随机显示在容器中。我写了一个脚本，但这个脚本只是使用rand函数。实际上它必须像照片一样 我必须做什么

我得到了什么

这是我的代码

HTML

<div class="onboard-fourth-step-circles-wrapper">
            @foreach(\App\SystemSupportedLocation::all() as $location)
                <div class="onboard-fourth-step-circles-item" style="width: {{ $location->size }}px; height: {{ $location->size }}px">
                    @php
                        if($location->type == 'country')
                            $model = \App\SystemCountry::class;
                        else if ($location->type == 'city')
                            $model = \App\SystemCity::class;
                    @endphp
                    <span>{{ $model::where('id', $location->location_id)->select('name')->first()->name }}</span>
                    <img src="{{ url('images/locations/' . $location->image) }}">
                </div>
            @endforeach
        </div>

JS

var containerW = parseInt($(".onboard-fourth-step-circles-wrapper").css('width'));
    var containerH = parseInt($(".onboard-fourth-step-circles-wrapper").css('height'));
    var positions = [];
    $('.onboard-fourth-step-circles-item').each(function() {
        var coords = {
            w: $(this).outerWidth(true),
            h: $(this).outerHeight(true)
        };
        var success = false;
        while (!success)
        {
            coords.x = parseInt(Math.random() * (containerW-coords.w)) ;
            coords.y = parseInt(Math.random() * (containerH-coords.h)) ;
            success = true;
            $.each(positions, function(){
                if (
                    coords.x <= (this.x + this.w) &&
                    (coords.x + coords.w) >= this.x &&
                    coords.y <= (this.y + this.h) &&
                    (coords.y + coords.h) >= this.y
                )
                {
                    success = false;
                }
            });
        }
        positions.push(coords);
        $(this).css({
            top: coords.y + 'px',
            left: coords.x + 'px'
        });
    });

CSS

.onboard-fourth-step-circles {
    background: white;
    padding: 10px;
    margin-top: 10px;
    position: relative;
    width: 100%;
    height: 300px;
    border: 1px solid black;
}
.onboard-fourth-step-circles-item {
    text-align:center;
    text-transform:capitalize;
    border-radius:100%;
    display:inline-block;
    position:absolute;
    width: 0px;
    border: 1px solid #B8C1CD;
    font-family: SFProText-Medium;
    font-size: 15px;
    color: #B8C1CD;

}

.onboard-fourth-step-circles-item img{
    display: none;
    width: 100%;
    border-radius: 100%;
}
.onboard-fourth-step-circles-wrapper{
    position: relative;
    width: 150%;
    height: 100%;
}

如何使用我的代码使视图与第一张照片类似？

问题在于JS生成的距离（字体没问题）