规定范围随机出现小球

<template>
  <div class="contain" ref="userinfo">
    <div
      v-for="(item, index) in ballList"
      :key="index"
      class="ball"
      :style="{
        top: all_y[index] + 'px',
        left: all_x[index] + 'px',
        transition: 'all 1s',
      }"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        ballList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], //后台小球总个数
        jsonArr: [], //所有小球的集合位置
        all_x: [], //第index小球X位置
        all_y: [], //第index小球Y位置
      };
    },
    mounted() {
      //初始化：小球出现
      this.getQiu(this.ballList.length);
      //为了对应每个index小球X轴和Y轴,把随机数组中的X/Y位置进行拆分
      for (let i = 0; i < this.jsonArr.length; i++) {
        this.all_x.push(this.jsonArr[i].xStart);
        this.all_y.push(this.jsonArr[i].yStart);
      }
    },
    methods: {
      getQiu(number) {
        //小球间隔
        let iconWidth = 50;
        let iconHeight = 50;

        //浏览器（范围框）的宽高
        let targetWidth = this.$refs.userinfo.offsetWidth;
        let targetHeight = this.$refs.userinfo.offsetHeight;

        //计算X轴和Y轴放置元素的个数
        var xNum = parseInt(targetWidth / iconWidth, 10);
        var yNum = parseInt(targetHeight / iconHeight, 10);
        var allNum = xNum * yNum; //浏览器窗口内总共可以放置元素的个数
        console.log(allNum); //共40个小球
        //当需要放置的元素的个数超过浏览器窗口内总共可以放置的元素的个数时，则返回
        if (number >= allNum) {
          return false;
        }

        //存放小球
        let tmpArray = [];
        for (let i = 0; i < allNum; i++) {
          tmpArray.push(i);
        }
        console.log(tmpArray); //[0,1,2,...,39]//依次序铺满屏幕共40个

        while (number) {
          //随机取出小球pointer
          var pointer = Math.floor(Math.random() * allNum);
          //删除数组tmpArray中第pointer值
          delete tmpArray[pointer];
          //根据随机小球索引 =》 计算固定小球原本位置，存放到jsonArr生成随机数组[0:{y:50,x:450},1:{y:0,x:200}]
          this.jsonArr.push({
            yStart: parseInt(pointer / xNum, 10) * iconWidth, //y位置(向下取整 3.8取3)
            xStart: (pointer % xNum) * iconHeight, //x位置（取余数 19/10余数9）
          });
          number--; //跳出判断
        }
      },
    },
  };
</script>

<style>
  .contain {
    border: 1px solid red;
    position: relative;
    width: 500px;
    height: 200px;
  }

  .ball {
    width: 50px;
    height: 50px;
    background: grey;
    border-radius: 100%;
    line-height: 50px;
    position: absolute;
    animation: identifier 1s alternate infinite;
  }
</style>