To achieve a random text color, font size into a normal distribution, the whole lozenge arranged label list;

How to implement a random configuration list of tags as shown (vue grammar) : dome example: http://39.106.166.212/tag

Let’s assume we can get an array of tag lists. Step by step, we’ll do the following:

1. Create tag components and write random color methods and normal size distribution methods to achieve random color and size text labels;

(1) write a RandomColor method $RandomColor

This can be achieved by randomly generating an RGB value within a valid range;

/* const $RandomColor = function(){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+")"; }Copy the code

In order to prevent overlap with background color, HSL mode can also be generated, and the brightness is reduced to prevent overlap with background.

/ / const $RandomColor2 = function() {return "HSL (" + math.round () * 360) + "," + Math.round(Math.random() * 100) + '%,' + Math.round(Math.random() * 80) + '%)'; }Copy the code
(2) write a method to realize Normal distribution $Normal

Only random distribution in the js, through an online search method can through the Box – muller algorithm will be joining together two random distribution for a normal distribution: reference: www.cnblogs.com/zztt/p/4025… En.wikipedia.org/wiki/Box%E2… Input parameters are mean and variance:

/* const $Normal = function(mean,sigma){var u=0.0, v=0.0, w=0.0, c=0.0; Do {// Get two independent random variables (-1,1) u= math.random ()*2-1.0; V = Math. The random () * 2-1.0; w=u*u+v*v; } while (w = = 0.0 | | w > = 1.0) c = math.h SQRT ((- 2 * Math. The log (w))/w); return mean+u*c*sigma; }Copy the code

This is done with a random color and size tag component

2. Randomly arrange arrays into diamonds (lists with more in the middle and less in two)

First, we get the following arraylist from the interface in Created, where we do not use the maximum value parameter, default is the remaining half;

$RandomSplit = $RandomSplit = $RandomSplit = $RandomSplit = $RandomSplit = $RandomSplit
Const $RandomSplit = function(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; }Copy the code

The following is a random split of 44 into the sum of eight numbers,

(2) Write the $NormalSort method to randomly arrange the numbers obtained above into a small array with two ends;

The general idea is to sort first, and then place two numbers at both ends each time. The process of placing is summarized to calculate the sum at both ends, judge the size of selective placement, and prevent uneven distribution at both ends

/* Const $NormalSort = function(arr){var temp = [], I =0, l = arr.length,leftTo=0,rightTo=0, sortArr = arr.sort(function(a,b){return b-a}); 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; }Copy the code

Our method reorders the array of the previous step as:

(3) Finally, generate a new data structure for V-for using the list data according to the data structure obtained in the previous step;
computed:{ tags(){ this.list = $NormalSort($RandomSplit(this.tagList.length,8)); Let temp = this.taglist.sort (function(a,b){return math.random ()>. 1:1; }).concat(); Return this.list.map((v,k) => {// Generate data structure from list return temp.splice(0,v); })}},Copy the code

The HTML code

<div v-for="(item,index) in tags" :key="index"  class="tag-body-tags-li">
                       <Tag v-for="(tag,index) in item" :key="tag.id" :tname="tag.name" ></Tag>
                   </div>
Copy the code