20170108_先行者周日群视频课程——文字版

各位同学们大家好，又到周日了。因为1月1号是新年放假，所以今天也可以算是2017年的第一个周日，不知各位都对2017年有什么安排，而2016年又有哪些收获。我只希望大家要把今年的计划要做的长一些。

长话短说哈，今天我们要学习的前端组件是，标签云。这个东西网上到处都是，相信大家都不止一次的看到过。就是一堆关键字，在一个固定大小的区域内，呈圆形分布，一般可以点击，有些还可以用鼠标拖动，拖动的时候圆形的标签云会有一个向着鼠标方向的缓动式的滚动。

首先说一下思路的问题，这个开发思路，就是从我一直在强调的“业务”来的。不管做什么，咱们都要有思路，例如写作文要有思路，解数学题要有思路，否则的话，根本写不下去。而写程序，写代码也是一样，没有思路，一样写不下去。

现在我们就先来分析一下标签云的开发的思路。这个标签云，它就是一堆p啊，span之类的容器，里面装着字，横向排成行。然后对它的位置进行操作。

（在截图上用鼠标画）

怎么操作呢？先来简单的

咱们用面向过程的思路来一步一步的想，首先肯定要有一大批的。。。p标签吧，里面装着文字，然后它们被一个大div容器给包着。这样它们就是根据自身的文字多少，形成几行几列的一个排版。

然后我们再想，标签云，那肯定文字大小和颜色是不一样的，是随机的。那么我们要有一个随机文字大小的函数；文字的颜色也是一样，还要有一个随机字体颜色的函数。

现在就是有二个函数了，rand()和randomcolor()这二个方法

接下来该给文字排版了，排版应该是搞成球型，就是从水平中线开始，向上和向下二个方向都是收紧的。这个地方可能有的同学就晕了，会想什么是不是得计算圆周啊，或是按圆形分布坐标什么的，。没那么复杂。其实就是上三行和下三行都缩进而已。

这个怎么想呢，思路可以这样理解，

圆形就是第一行只有一个或二个标签；

第二行有三或四个标签；

第四行有五或六个标签，然后再往下的行数就是正常了。

（在截图上画出来）

到最后一行的时候，只有一二个标签；

倒数第二行有三四个标签；

倒数第三行有五六个标签，

大家来看，这样不就排成圆形了么？把排版问题想清楚，就解决了最大的问题了。

接下来看，如何来排成这样呢？

大家都知道，容器能够横向排成一行用的最多的，就是float:left，那么如果我们从0开始算起，然后给第[2]个容器添加clear:left，

把它的左侧浮动给清除掉，它不就折到第二行了嘛。。

（这时再在截图上画，第几个开始clear:left折行）

然后继续算，第[2]个就是3，那么第一行有二标签；第二行至少要有4个标签，那就得在第[6]个标签上添加clear:left折行，那么第三行的第一个标签，其实就是所有标签中的第七个，再往下就是正常排列了

这时大家会发现，头三行标签虽然是递减的，但它们都靠最左边。因为它们虽然有clear:left属性，但同时它们也是float:left，所以要想让它们往中间靠，得给这三行的左起第一个标签加上margin-left属性。

这个属性怎么算呢？（继续在截图上画容器宽度和marginleft的关系）

大家可以想象有一堵墙，横向十一块砖，第一排左右各拿掉5块；第二排左右各拿掉4块，第三排左右各拿掉3块，第四排左右各拿掉4块。这样排下来，你们看是不是一个半圆了！

所以很简单，就是用容器的宽度除以标签的数量，然后用这个值做为margin-left的值。这样标签数量少的行，它的marginleft值就大；标签数量多的行，它的marginleft的值就小。

下半圆同样如此，获得标签的集合，然后取[集合.length-2]，就是倒数第3个标签；取[集合.length-6]，就是倒数第7个标签；

至于什么标签圆球的远景和近景，那就是大小和透明度的设置。而鼠标点击拖动圆球时，圆球滚动，且滚动时各标签的位置和透明度有相应变化，那更是涉及到css3的位置、变形和透视关系xyz轴等知识，时间关系这一节课里是说不完的，这节课里先讲基本的，就是先把标签云，其实就是随机颜色和大小的按圆形排列标签，给做出来。

至于标签球的位置和空间、透视的变换，如果大家有兴趣，那我们下次课再讲。

//---------------------

大家现在来跟我看两个例子。

咱们这个课程并不是教大家手写前端组件，而是教大家搞明白前端组件是如何实现，需求是如何被理解，这个“东西”是如何，在什么样的思路之下，被做出来的。所以并不会有手把手的教你一行行的写代码。而是带你读代码，读懂代码，读懂代码所表达出来的思路。

看代码，先来看结构，看一下，css,html,js三个部分在一起，因为比较简单嘛。代码在wondiw.load中，这样写还不如直接把js放到页面尾。

然后里面是先获取wrap容器，然后是获取此容器中全部的标签，a

然后是二个方法，分别是字体和颜色的。

看这个rand()字号函数，里面用parseInt来给随机数取整，为什么要加1呢？因为Math.random()方法产生的随机数是0~1之间的。

然后是randomcolor()随机颜色值方法，

它使用Math.ceil()，对产生的随机数，进行向上的舍入。

然后它用来产生随机数的数字为什么是16777215呢？因为16777215正好是十进制的白色。所以这句的意思，就是“产生0 ~ 16777215”之间的随机数，然后用toStirng将之转成16进制。大家来看，我用chrome控制台演示一下。

下面的if就是一个补0判断，因为有些颜色值是以0开头的。

再接下来就是for循环，很简单了，就是在循环中给第[i]个标签调用二个随机数方法，然后产生随机的字体大小，颜色，背景色