Javascript 添加不重叠的元素

我读过这个关于如何随机定位元素的问题，它非常有效。

我如何使圆圈在随机定位时不与中心的徽标重叠

JSFiddle：

var maxSearchIterations=10；
var min_x=110；
var max_x=window.innerWidth-310；
var min_y=110；
var max_y=window.innerHeight-310；
var填充面积=[]；
功能计算重叠（a1）{
var重叠=0；
对于（i=0；i

以下是解决方案

Css

Html

根本不清楚您在这里想要实现什么。您没有包含任何代码，您只是链接到了另一个问题，这个问题似乎链接到了其他作者编写的一些代码。对不起！谢谢你的回复，但我不是这个意思。让我重新表述一下，我希望圆圈的随机位置不在徽标区域上，而不是徽标位于圆圈上方。明白了吗？

var maxSearchIterations = 10;
var min_x = 110;
var max_x = window.innerWidth - 310;
var min_y = 110;
var max_y = window.innerHeight - 310;
var filled_areas = [];

function calc_overlap(a1) {
var overlap = 0;
for (i = 0; i < filled_areas.length; i++) {

    var a2 = filled_areas[i];

    // no intersection cases
    if (a1.x + a1.width < a2.x) {
        continue;
    }
    if (a2.x + a2.width < a1.x) {
        continue;
    }
    if (a1.y + a1.height < a2.y) {
        continue;
    }
    if (a2.y + a2.height < a1.y) {
        continue;
    }

    // intersection exists : calculate it !
    var x1 = Math.max(a1.x, a2.x);
    var y1 = Math.max(a1.y, a2.y);
    var x2 = Math.min(a1.x + a1.width, a2.x + a2.width);
    var y2 = Math.min(a1.y + a1.height, a2.y + a2.height);

    var intersection = ((x1 - x2) * (y1 - y2));

    overlap += intersection;
}
return overlap;
}

function randomize() {

filled_areas.splice(0, filled_areas.length);

var index = 0;
$('.c1, .c2, .c3, .c4').each(function() {
    var rand_x = 0;
    var rand_y = 0;
    var i = 0;
    var smallest_overlap = 9007199254740992;
    var best_choice;
    var area;
    for (i = 0; i < maxSearchIterations; i++) {
        rand_x = Math.round(min_x + ((max_x - min_x) * (Math.random() % 1)));
        rand_y = Math.round(min_y + ((max_y - min_y) * (Math.random() % 1)));
        area = {
            x: rand_x,
            y: rand_y,
            width: $(this).width(),
            height: $(this).height()
        };
        var overlap = calc_overlap(area);
        if (overlap < smallest_overlap) {
            smallest_overlap = overlap;
            best_choice = area;
        }
        if (overlap === 0) {
            break;
        }
    }

    filled_areas.push(best_choice);

    $(this).css({
        position: "absolute",
        "z-index": index++
    });
    $(this).animate({
        left: rand_x,
        top: rand_y
    });
});
return false;
}

#logo-content{
position: absolute;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
z-index: 10;
}

  <div id="wrapper">
   <div id="logo-content">
    <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 93.7 93.7"      enable-background="new 0 0 93.7 93.7" xml:space="preserve"></svg>
   <div>
 </div>