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]个标签调用二个随机数方法,然后产生随机的字体大小,颜色,背景色

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2017-01-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯NEXT学位

我不知道你知不知道但前端NEXT知道的伪元素小技巧

3637
来自专栏java小白

CSS三大特性

1654
来自专栏Android常用基础

自定义View(一)-动画- XML生成View动画

感觉好久没有写博客了。首先因为最近比较忙,有在学习即时通讯相关的开源项目,好不容易忙完了。有点时间就抓紧写博客。之前学习的开源项目百篮应用已经获得360+sta...

1141
来自专栏前端说吧

css布局 - 九宫格布局的方法汇总(更新中...)

其实换一种角度和思路,又是一个解决方法,不用margin负值,我们想要li要对其ul两端效果,之所以纠结是因为li又需要margin-right,而右边最后一个...

2672
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(九)-- 巧妙的实现 CSS 斜线

3294
来自专栏walterlv - 吕毅的博客

WPF 绘制对齐像素的清晰显示的线条

发布于 2017-12-12 13:49 更新于 2018-08...

1471
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型

1482
来自专栏Coco的专栏

奇妙的 CSS shapes(CSS图形)

2455
来自专栏贺贺的前端工程师之路

Flex Box布局学习- 语法

上一篇,我学习并整理了使用flex时,需要注意的兼容性问题。那么今天就来学习一下有关flex语法的东西。

833
来自专栏前端杂货铺

绝对定位下的盒模型

元素被绝对定位,那么元素将会脱离正常流(normal flow),并依据包含块来定位。包含块的概念及其判定可以看这里。 在负margin的应用一文中,我们提到了...

2444

扫码关注云+社区

领取腾讯云代金券