Math.random()返回值相似度高：绝对定位元素位置异常聚集问题

先给你吃个定心丸——Math.random()并没有时间相关性导致连续值相似度高的问题。它实现的是伪随机数生成算法，连续调用生成的数值序列在统计上是均匀分散的，不会出现你担心的“连续值扎堆”情况。

为什么你的云朵会聚集？ #

我猜问题大概率出在以下几个地方：

• 父容器的定位基准不对
  你给云朵设置了position: absolute，但如果包裹云朵的<div className={props.side}>没有设置position: relative（或者absolute/fixed），那么云朵的top和left百分比是相对于整个视口计算的，而不是这个父容器。如果父容器本身尺寸远小于视口，那所有云朵都会被限制在视口的某个区域，自然看起来聚集。

  解决方法很简单：给父容器添加上position: relative，让云朵的定位基准变成这个容器。

• 视觉上的聚类错觉
  随机分布本来就会自然出现“聚集”的情况——这是统计学里的聚类错觉，人类大脑会不自觉地把随机点当成有规律的集群。你可以试着多生成一些云朵（比如几十上百个），或者在循环里打印出每次生成的top/left值看看，大概率数值是均匀分布的，只是眼睛骗了你。

• 云朵元素本身尺寸过大
  你的云朵高度是50 * props.cloudSize + 'px'，如果cloudSize数值不小，云朵本身尺寸很大，那么即使位置随机，也很容易互相重叠，看起来像是聚集在一起。可以试试随机化云朵的尺寸，比如：

  height: 50 * (props.cloudSize * (0.8 + Math.random()*0.4)) + 'px',
  

  让大小有差异，视觉上会更分散。

额外优化建议 #

如果想让云朵分布得更均匀，避免重叠，可以试试这些方法：

• 网格分区法：把父容器分成若干网格单元格，每个云朵放在随机的单元格里，确保不会重叠；
• 碰撞检测：生成每个云朵的位置时，检查是否和已有的云朵重叠，如果重叠就重新生成位置；
• 使用安全随机数：用crypto.getRandomValues()替代Math.random()（它的随机性更优，不过对视觉分布的改善有限）。

内容的提问来源于stack exchange，提问作者zver