前言
在做搜索用户这个需求时，因为是用的模糊查询所以返回的用户数量不固定，而我期望的对返回结果（一个圆形用户头像）的展示效果是越少越趋向于页面中心的位置，而且每个头像互不相交，且位置随机
解决方案
那现在看来就看简化成以下需求
0. 因为要做聚拢效果，所以容器应该是个圆形会更好看
1. 利用圆的极坐标公式和随机函数可以得到圆内随机的一个坐标
极坐标公式：
let randomX = 0
let randomY = 0
const theta = Math.random() * Math.PI * 2
const r = Math.sqrt(Math.random()) * len
randomX = Math.cos(theta) * r
randomY = Math.sin(theta) * r
2. 对生成的圆进行碰撞检测
利用圆于圆的相切公式我们很容易得出当两圆的圆心距离小于两圆半径之和时，需要进行处理
Math.sqrt(Math.pow(x2- x1,2) + Math.pow(y2 - y1,2)) <= r2+r1
3. 根据需要生成的随机坐标数量来设置极坐标公式中半径长度，以此来控制随机范围以达到生成的坐标趋向中心的效果
具体设置半径时的倍数可以考虑下图(Circle_packing_in_a_circle)
有条件的也可FQ
我是链接
