jQuery Random Top / Left定位前DOM

Question

我正在尝试对随机数量的元素（跨度）进行随机上/左定位，这些元素将至少相距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
    });
}

示例输出：

如您所见，它们并非均匀分布。有些是漂浮在另一个之上，当它们应该分散至少50px。 有什么建议/解决方案吗？

Answer 1

嗯，我无法让它完美无缺，但这是我能想到的最佳解决方案。让我知道是否有更好的东西：

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
    });
}

以下示例输出： 还有一些轻微的溢出，但我无法做得更好

Answer 2

基于顺序的解决方案（支持最多12个术语，直到我弄乱css）

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
    });
}