jQuery Random Top/Left 定位 pre-DOM答案

【问题标题】：jQuery Random Top/Left positioning pre-DOMjQuery Random Top/Left 定位 pre-DOM
【发布时间】：2014-05-12 17:05:38
【问题描述】：

我正在尝试为随机数量的元素（跨度）获取随机顶部/左侧定位，这些元素之间的距离至少为 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
    });
}

示例输出：

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

【问题讨论】：

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

标签： javascript jquery html css dom

【解决方案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
    });
}

下面的示例输出：还有一些小的溢出，但我不能做得更好

【讨论】：

【解决方案2】：

基于顺序的解决方案（在我弄乱 css 之前最多支持 12 个术语）

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

【讨论】：