前端培训-初级阶段-场景实战(2019-05-16)-聊天头像-微信头像-群组头像

linong

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。

场景实战这块内容每个人的内容都不一样。所以最近的更新基本都是我遇到并解决掉的问题。后期会吧他们的内容贴地址。

我们要讲什么?

这节还是聊天消息中遇到的问题,群组消息之头像,哈哈是不是感觉好熟悉,对的是我之前抛出的一个问题。
我们先来了解一下需求,微信大家都有吧,拉个群注意观察群头像。会成为如下效果。今天我们就是要实现一下它。

clipboard.png

flex 实现微信头像布局

效果地址,本来是在JSRun的,但是大哥最近有点不稳定老连不上。如果你说什么Flex我不会啊之前写的Flex的教程一发入魂。

  1. 看第一个效果(avatar3)一个在上,两个在下,想想有什么属性适合?flex-wrap 用来规定内容放不下,如何换行

    1. nowrap(不换行)(默认值)
    2. wrap(换行,第一行在上方)(两个在上,一个在下)
    3. wrap-reverse(换行,第一行在下方)(两个在下,一个在上)
  2. 是不是发现,效果对了,但是排序的头像错了?微信头像是加群时间升序的。不用担心,渲染的时候取反就ok,负负得正嘛。。
  3. 头像等分,我是参照100px。一个90px,两个45px,三个30px。然后使用百分比实现。为什么要用百分比呢?因为你也不能保证所有地方都是100px吧。
  4. 然后你是不是发现多行的时候,间距有问题?align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。设置一下就好了

background-image 实现微信头像布局

效果地址,我还是个孩子,写起来真的烦啊,我就写前几个好不好。
这个效果的实现依赖于多重背景实现,background --MDN

absolute 实现

效果地址,写起来感觉比上一个方案要简单一点,但是,还是不好写。我只写了前几个。

文档流+after/before填充

效果地址,基本上属于看到哪里不对改哪里,操作上来说,比上两个方案要简单一些。
clipboard.png

其他思路

  1. 需要换行的地方插入br标签,然后水平居中。垂直居中使用padding。
  2. 方案同上垂直居中换成table-cell。等其他方法。
  3. grid

方案优缺点

方案 理解程度 位置控制 描述
flex 很好理解,思路清晰,但是无法对于设计稿精细微调
背景图 高可控性,但是代码复杂,不易理解修改
绝对定位 高可控性,但是代码复杂,不易理解修改,比背景图还是要好理解一点
文档流 可控性较好,但是代码无关联,易于修改。不推荐。
grid

后记

你有什么方案可以在评论区留言讨论
今日分享-TypeScript快速入门

阅读 2.1k

javascript-lNong
只此一生,何必从众

Read-Search-Ask

24.5k 声望
6.6k 粉丝
0 条评论

Read-Search-Ask

24.5k 声望
6.6k 粉丝
文章目录
宣传栏