专栏首页web前端教室20170108_先行者周日群视频课程——文字版

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),作者:老尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 学习前端比看书更重要的,就是动手练习

    在今天的零基础web前端课程中,讲到调用api获取商品列表json生成dom节点添加到页面中的时候,在课程的间隙要进行相应的练习。我基本确定每个同学都听懂了,然...

    web前端教室
  • 前端开发工具你最喜欢哪一个?

    工欲善于其事,必先利其器,下面是一些常用的web前端的开发工具,哪个是你最喜欢 的?或是有哪些下面还没有列出来?在文章结尾留言告诉我吧,

    web前端教室
  • 【结构】前端开发要不要学习算法、数据结构?它有什么用?感觉工作中用不到呀

    前端开发的日常工作更多的是围绕着需求和业务逻辑来展开,用js操作的也是json和dom会比较多一些,那么在这样的日常工作中,如何体现出“扎实的数据结构和算法”的...

    web前端教室
  • vim-tabe多标签切换

    原文链接:https://www.cnblogs.com/liqiu/archive/2013/03/26/29819...

    ccf19881030
  • 学术资讯 | 优Tech分享-To B业务中的图像多标签识别

    现实生活中,人们通常会使用手机记录生活,拍摄并保存自己的所见所闻。因此,对相册中的照片场景及相关进行识别分类,帮助人们更快速整理照片成了一种不可或缺的需求。

    优图实验室
  • 从数据仓库到百万标签库,产品经理如何用好大数据?

    大数据深度挖掘、大数据精准营销、大数据科研等是目前比较热门的大数据应用关键词,随着大数据发展,利用大数据做营销的手段越来越丰富,但也越来越难了。

    孔雀
  • HTML知识清单(附学习网站)

    上面知识点知识本人总结的,想要深入学习的话请跳转至http://www.w3school.com.cn/专业的前段技术学习网站,免费开源!!!

    时间静止不是简史
  • Web前端学习 第2章 网页重构2 常用的html标签

    上一节我们已经了解了html和css的基本概念,本节通过上一节的一个例子来说说HTML的语法.

    学习猿地
  • 如何有效推进百万标签库的治理?

    在大多数公司,成千上万的标签虽然在某种程度上是数据服务能力的象征,但到最后往往成为了一种负担,只管杀不管埋的现象太普遍了!

    木东居士
  • 前端基础-HTML

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    cwl_java

扫码关注云+社区

领取腾讯云代金券