vue云标签效果升级版，动态钻形

 参考https://www.cnblogs.com/pangys/p/10570189.html

<template>
  <div>
    <ul>
      <li v-for="(dl, index) in listArr" :key="index">
        <a v-for="(item, dli) in dl" :key="dli" :href="item.src" :style="{ color: item.setColor, fontSize: item.setSize }">{{ item.name }}</a>
      </li>
    </ul>
    <button @click="changeCont">改变按钮</button>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      listArr: [],
      list: [
        {
          name: '我是一',
          setColor: '',
          setSize: '',
          src: 'home'
        },
        {
          name: '我是2',
          setColor: '',
          setSize: '',
          src: 'home1'
        },
        {
          name: '我是3',
          setColor: '',
          setSize: '',
          src: 'wb'
        },
        {
          name: '我是4',
          setColor: '',
          setSize: '',
          src: 'wb'
        },
        {
          name: '我是5',
          setColor: '',
          setSize: '',
          src: 'wb'
        },
        {
          name: '我是6',
          setColor: '',
          setSize: '',
          src: 'wb'
        },
        {
          name: '我是7',
          setColor: '',
          setSize: '',
          src: 'wb'
        },
        {
          name: '我是8',
          setColor: '',
          setSize: '',
          src: 'wb'
        },
        {
          name: '我是9',
          setColor: '',
          setSize: '',
          src: 'wb'
        },
        {
          name: '我是10',
          setColor: '',
          setSize: ''
        },
        {
          name: '我是11',
          setColor: '',
          setSize: ''
        },
        {
          name: '我是12',
          setColor: '',
          setSize: ''
        },
        {
          name: '我是13',
          setColor: '',
          setSize: ''
        },
        {
          name: '我是14',
          setColor: '',
          setSize: ''
        },
        {
          name: '我是15',
          setColor: '',
          setSize: ''
        },
        {
          name: '我是16',
          setColor: '',
          setSize: ''
        },
        {
          name: '我是17',
          setColor: '',
          setSize: ''
        },
        {
          name: '我是18',
          setColor: '',
          setSize: ''
        },
        {
          name: '我是19',
          setColor: '',
          setSize: ''
        },
        {
          name: '我是20',
          setColor: '',
          setSize: ''
        },
        {
          name: '我是21',
          setColor: '',
          setSize: ''
        },
        {
          name: '我是22',
          setColor: '',
          setSize: ''
        },
        {
          name: '我是23',
          setColor: '',
          setSize: ''
        }
      ],
      setColor: [],
      setSize: []
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.changeCont();
  },
  destroyed() {},
  methods: {
    getList() {
      let list = this.NormalSort(this.RandomSplit(this.list.length, 8)); //获取数据结构
      let arr4 = JSON.parse(JSON.stringify(this.list));
      let temp = this.list
        .sort(function (a, b) {
          return Math.random() > 0.5 ? -1 : 1;
        })
        .concat();
      return list.map((v, k) => {
        //根据list生成数据结构
        return temp.splice(0, v);
      });
    },
    changeCont() {
      this.listArr = this.getList();

      this.listArr.forEach(res => {
        res.forEach(dlk => {
          dlk.setColor = this.getColor();
          dlk.setSize = this.getSize();
        });
      });
    },
    getSize() {
      //12-30区间
      var num = parseInt(Math.random() * 23 + 12);
      return num + 'px';
    },
    getColor() {
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return 'rgb(' + r + ',' + g + ',' + b + ')';
    },
    RandomSplit(total, nums, max) {
      let rest = total;
      let result = Array.apply(null, { length: nums })
        .map((n, i) => nums - i)
        .map(n => {
          const v = 1 + Math.floor(Math.random() * (max | ((rest / n) * 2 - 1)));
          rest -= v;
          return v;
        });
      result[nums - 1] += rest;
      return result;
    },
    NormalSort(arr) {
      var temp = [],
        i = 0,
        l = arr.length,
        leftTo = 0,
        rightTo = 0,
        s = arr.sort(function (a, b) {
          return b - a;
        });
      console.log(s);
      while (arr.length > 1) {
        let a = arr.pop();
        let b = arr.pop();
        if (leftTo < rightTo) {
          temp[i] = b;
          temp[l - (i + 1)] = a;
        } else {
          temp[i] = b;
          temp[l - (i + 1)] = a;
        }
        i++;
      }
      return temp;
    }
  }
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul {
   450px;
  height: 400px;
  margin: 0 auto;
  // display: flex;
  // flex-direction: row;
  // flex-wrap: wrap;
  li {
    margin: 5px 5px;
    //float: left;
    a {
      margin: 0 5px;
    }
  }
}
</style>

 知识点一:分析

分析Array.apply(null, { length: 20 })

https://segmentfault.com/a/1190000011435501