Javascript jQuery随机上/左定位预DOM

我正试图获得随机数量的元素（跨度）的随机上/左定位，这些元素之间的距离至少为50像素，以确保清晰的分散。我现在掌握的代码如下：

function PositionOK(x, y) {
    axisarray.sort(function (a, b) {
        return a - b
    });
    for (var i in axisarray) {
        var pos = axisarray[i];
        if (Math.abs(x - pos.x) < 50) {
            return false;
        }
        if (Math.abs(y - pos.y) < 50) {
            return false;
        }
    }
    return true;
}
for (var xy = 0; xy < termArray.length * 2; xy++) {
    var x = Math.floor(Math.random() * 500);
    var y = Math.floor(Math.random() * 800);
    if (PositionOK(x, y)) {
        axisarray.push({
            'xaxis': x,
            'yaxis': y
        });
    } else axisarray.push({
        'xaxis': x + 50,
        'yaxis': y + 50
    });
}

功能位置OK（x，y）{
排序（函数（a，b）{
返回a-b
});
for（axisarray中的变量i）{
var pos=axisarray[i]；
如果（数学绝对值（x-位置x）<50）{
返回false；
}
如果（数学绝对值（y-位置y）<50）{
返回false；
}
}
返回true；
}
对于（变量xy=0；xy

样本输出：

如你所见，它们的分布并不均匀。一些漂浮在另一个之上，而它们应该至少分散50像素。

---

有什么建议/解决方案吗？

嗯，我没能让它达到像素级的完美，但这是我能想到的最好的解决方案。如果有什么可以让它变得更好，请告诉我：

axisarray = [];
var x, y;
x = y = 0;
for (var xy = 0; xy < termArray.length * 2; xy++) {
    function genxy(shuffle) {

        if (shuffle) {
            axisarray = axisarray.sort(function (a, b) {
                return a.xaxis > b.xaxis ? 1 : -1;
            });
            x = Math.abs(Math.floor(Math.random() * (axisarray[xy - 1].xaxis + 50) + axisarray[xy - 1].xaxis));
            axisarray = axisarray.sort(function (a, b) {
                return a.yaxis > b.yaxis ? 1 : -1;
            });
            y = Math.abs(Math.floor(Math.random() * (axisarray[xy - 1].yaxis + 50) + axisarray[xy - 1].yaxis));
        } else {
            axisarray = axisarray.sort(function (a, b) {
                return a.xaxis > b.xaxis ? 1 : -1;
            });
            x = Math.floor(Math.random() * x + 100) + 50;
            axisarray = axisarray.sort(function (a, b) {
                return a.yaxis > b.yaxis ? 1 : -1;
            });
            y = Math.floor(Math.random() * y + 100) + 50;
        }
    }
    if (xy > 0) {
        genxy(true);
    } else {
        x = Math.floor(Math.random() * 50) + 50;
        y = Math.floor(Math.random() * 50) + 50;
    }
    while (x > 800 || y > 500 || x < 0 || y < 0) {
        genxy(false);
    }
    axisarray.push({
        'xaxis': x,
        'yaxis': y
    });
}

axisarray=[]；
变量x，y；
x=y=0；
对于（变量xy=0；xyb.xaxis？1:-1；
});
x=Math.abs（Math.floor（Math.random（）*（axisarray[xy-1].xaxis+50）+axisarray[xy-1].xaxis））；
axisarray=axisarray.sort（函数（a，b）{
返回a.yaxis>b.yaxis？1:-1；
});
y=Math.abs（Math.floor（Math.random（）*（axisarray[xy-1].yaxis+50）+axisarray[xy-1].yaxis））；
}否则{
axisarray=axisarray.sort（函数（a，b）{
返回a.xaxis>b.xaxis？1:-1；
});
x=数学地板（数学随机（）*x+100）+50；
axisarray=axisarray.sort（函数（a，b）{
返回a.yaxis>b.yaxis？1:-1；
});
y=Math.floor（Math.random（）*y+100）+50；
}
}
如果（xy>0）{
genxy（真）；
}否则{
x=数学地板（数学随机（）*50）+50；
y=Math.floor（Math.random（）*50）+50；
}
而（x>800 | | y>500 | | x<0 | | y<0）{
genxy（假）；
}
axisarray.push({
“xaxis”：x，
“yaxis”：y
});
}

样本输出如下： 仍然有一些小的溢出，但我不能做任何更好的基于顺序的解决方案（最多支持12个术语，直到我弄乱css）

axisarray=[]；
变量x，y；
x=y=0；
对于（变量xy=0；xy0&&xy 12）{
x=数学楼层（（数学随机（）*125）+100）；
y=数学楼层（（数学随机（）*100）+75）；
}否则{
x=100；
y=50；
}
if（xy==termArray.length*2-1）axisarray.sort（函数（a，b）{
返回a-b
});
axisarray.push({
“xaxis”：x，
“yaxis”：y
});
}

你不需要这样的东西吗？'xaxis'：x+50+'px'？我看到的一个潜在问题是，虽然坐标都相距50px，但这并不意味着每个块的边彼此相距50px。因为只有元素的原点是50px，而不是元素的实际边界，所以可以看到重叠。我不知道该如何解决这个问题，但我很确定这是您的问题。您还必须考虑元素的宽度和高度。@jp310，这是在生成文档时完成的。@ProtonBetaDecay是的，我很确定问题在于，我无法将元素的宽度和高度添加到其顶部/左侧位置

axisarray = [];
var x, y;
x = y = 0;
for (var xy = 0; xy < termArray.length * 2; xy++) {
    function genxy() {
        if (xy % 3 == 0) {
            var temp = Math.floor((Math.random() * 100) + 60);
            y = axisarray[xy - 1].yaxis + temp;
            x = Math.floor((Math.random() * 125) + 100);
        } else {
            y = axisarray[xy - 1].yaxis;
            x = axisarray[xy - 1].xaxis + 300;
        }
    }
    if (xy > 0 && xy <= 12) {
        genxy();
    } else if (xy > 12) {
        x = Math.floor((Math.random() * 125) + 100);
        y = Math.floor((Math.random() * 100) + 75);
    } else {
        x = 100;
        y = 50;
    }
    if (xy == termArray.length * 2 - 1) axisarray.sort(function (a, b) {
        return a - b
    });
    axisarray.push({
        'xaxis': x,
        'yaxis': y
    });
}