Javascript 将动态生成的元素保留在文档边界内

每当单击一个元素时，我都会创建多个更小的副本。这些克隆将以随机的距离和方向发送。我无法将它们保持在文档边界内

我知道我需要检查每个新元素的位置，并将其与文档边界进行比较，以便它生成的任何新元素本身都符合要求，但我担心用户会调整浏览器的大小，并且如果用户有一个非常小的窗口，它将如何影响功能。。。所以我想我还想设置一个边界可以降级的楼层或最小尺寸

这一切似乎都有点资源密集型，我不希望它太累人。有没有一个有效的方法来实现我想要的？你可以在小提琴或下面看到我可怜的尝试：

var contW = $(document).width();
var contH = $(document).height();

var source = $(this).position();
var posNeg = Math.random() < 0.5 ? -1 : 1;
var newTop = Math.floor(Math.random() * (contH / 2 + (posNeg * $(this).height()))) * posNeg;
var posNeg = Math.random() < 0.5 ? -1 : 1;
var newLeft = Math.floor(Math.random() * (contW / 2 + (posNeg * $(this).width()))) * posNeg;

var contW=$（document）.width（）；
var contH=$（document.height（）；
var source=$（this.position（）；
var posNeg=Math.random（）<0.5-1 : 1;
var newTop=Math.floor（Math.random（）*（contH/2+（posNeg*$（this.height（）））*posNeg；
var posNeg=Math.random（）<0.5-1 : 1;
var newLeft=Math.floor（Math.random（）*（contW/2+（posNeg*$（this.width（）））*posNeg；

这就是你想要的吗

// constrain newTop and newLeft
    if  (newTop < 0){
        newTop = 0;
    }
    if  (newTop > contH){
        newTop = contH;
    }
    if  (newLeft < 0){
        newLeft = 0;
    }
    if  (newLeft > contW){
        newLeft = contW;
    }

//约束newTop和newLeft
if（newTop<0）{
newTop=0；
}
如果（newTop>contH）{
newTop=contH；
}
if（newLeft<0）{
newLeft=0；
}
如果（新建左>续）{
newLeft=contW；
}

演示：

问题（我可以解决）：负边距：导致克隆图像超出边距

解决方案：删除负边距。尝试使用容器来包含克隆。宽度每次减少一半，因此必须考虑宽度（避免从底部和右侧边缘向外）

我为测试小提琴所做的更改：

html, body { width:100%; height: 100%; }
div#container {
    position: relative;
    width: 350px;
    height: 350px;
    border: 1px solid gray;
}
img.cat {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 250px;
    height: 250px;
    cursor: pointer;
}

---

脚注：这个例子只是一个测试，以证明遏制问题可能是负利润。您需要将容器更改为文档，然后对其进行调整。

我正在尝试帮助您，但无法停止单击“猫”。。哈哈，很高兴我没有让它们喵喵叫！：-）是的，哇，这么简单的解决方案。但现在西北象限的一切似乎都在凝结。我认为这是一个问题，你的方式限制顶部和左侧，但我不确定。如果可能的话，我希望它们能均匀地分布在各个方向。哇。。。abhitalks给出了更全面的答案，对不起！可以预见，您的解决方案与user3008011所做的相反。通过消除负边距，您现在几乎完全支持右下角（而不是左上角）。不过，我觉得这离它需要的地方更近了。在全屏上查看这一点：（1）我故意使用容器来包含克隆，以便您可以看到实际发生的情况。克隆人永远不会离开容器。但是，由于宽度的变化，图像可能在容器边界之后结束，但永远不会穿过它。（2） 检查

getRandomInt

函数，并与正在生成的

newTop

和

newLeft

交叉引用。你会发现它永远不会超过450（容器的大小。值不偏向任何一方，它们是随机混合的。此外，如果您使用文档/正文作为容器，那么您将无法看到图像跨越边界的原因。我明白了。这非常有帮助，非常有指导性，谢谢！问一个问题：它真的是随机的吗？因为通过纯粹的观察（我知道这是有缺陷和偏见的），此方法似乎为克隆提供了更大的可能性，使其传播到可用空间最多的任何地方。最初，这可能是右下角，但随后它们都开始在左上角繁殖。我的评估正确吗？随机化是由一个单独的函数完成的，并在最小值和最大值之间产生随机化。确实如此不知道哪里有可用空间，哪里没有。js（和许多其他语言）中的随机化是通过播种系统时间来实现的。更多信息如下：