使用伪类来实现类似微信群聊的头像样式

最近看了一篇张鑫旭的博客，觉得人家的想法特别奇特，很值得学习。遂借鉴学习并记录一下，以备不时之需。

原文地址：伪类匹配列表数目实现微信群头像CSS布局的技巧

简介

我们在使用微信群聊的时候，群聊的头像，是所在在群聊中的人的头像的一个组合。随着群聊成员数量的不同，群聊头像的样式也不一样。下面就是使用伪类来实现这样一个功能，让其样式随着数量的变化而变化。

以下是代码：

ul{padding: 0; margin: 0;list-style-type: none;width: 240px; height: 240px;background-color: #eee;
}
li {background: url(https://s2.ax1x.com/2019/03/13/AkieC6.jpg);background-size: 100%;outline: 1px solid #fff;
}button{margin-top: 20px;
}/* 1个 */
li:only-child {height: 100%;
}
/* 2个 */
li:first-child:nth-last-child(2),li:first-child:nth-last-child(2) + li{width: 50%;height: 50%;}
li:first-child:nth-last-child(2) + li{margin-left: auto;
}/* 3个 */
li:first-child:nth-last-child(3),li:first-child:nth-last-child(3) ~ li{width: 50%;height: 50%;float: left;}
li:first-child:nth-last-child(3){margin-left: 25%;
}/* 4个 */
li:first-child:nth-last-child(4),li:first-child:nth-last-child(4) ~ li {width: 50%; height: 50%;float: left;}/* 5个 */
li:first-child:nth-last-child(5){width: 160px; height: 160px;float: left;
}
li:first-child:nth-last-child(5) ~ li {width: 80px; height: 80px;float: left;
}/* 6个 */
li:first-child:nth-last-child(6){width: 160px; height: 160px;float: left;
}
li:first-child:nth-last-child(6) ~ li {width: 80px; height: 80px;float: left;
}/* 7个 */
li:first-child:nth-last-child(7){width: 80px; height: 80px;margin: auto;
}
li:first-child:nth-last-child(7) ~ li {width: 80px; height: 80px;float: left;
}/* 8个 */
li:first-child:nth-last-child(8){width: 80px; height: 80px;margin-left: 40px;float: left;
}
li:first-child:nth-last-child(8) ~ li {width: 80px; height: 80px;float: left;
}/* 9个 */
li:first-child:nth-last-child(9),li:first-child:nth-last-child(9) ~ li {width: 80px; height: 80px;float: left;}
</style>

以下是实现效果：

原文地址：伪类匹配列表数目实现微信群头像CSS布局的技巧

使用伪类来实现类似微信群聊的头像样式相关推荐

类似微信群聊九宫格头像的算法实现
在工作中遇到了一个开发的需求是将多选的图片聚合起来,类似于微信群聊那种九宫格的头像的那种.当然遇到这个需求首先肯定会从网上查找一些资料,发现大部分的实现类似于通过定义九宫格的ImageView控件来实 ...
Android 仿钉钉、微信群聊组合头像
CombineBitmap 项目地址:SheHuan/CombineBitmap 简介: Android 仿钉钉.微信群聊组合头像更多:作者提 Bug 标签: 效果预览功能生成类似钉 ...
Android 仿钉钉、微信群聊组合头像，Android插件化入门指南
简介: Android 仿钉钉.微信群聊组合头像更多:作者提 Bug 标签: 效果预览 | | | | | | - | - | - | - | | | | | | | | | | | 功 ...
Android 仿钉钉、微信群聊组合头像，大厂面试题汇总
效果预览 | | | | | | - | - | - | - | | | | | | | | | | | 功能生成类似钉钉.微信群聊组合头像 Bitmap 可使用图片资源 id.bitmap ...
Android 仿钉钉、微信群聊组合头像 CombineBitmap
前段时间,产品提出群组头像改为类似微信的九宫格图像,于是在网上找了一个非常好用的控件CombineBitmap,在这里记录一下. 作者的GitHub项目地址:https://github.com/Ot ...
Android仿微信视频群聊,Android 仿钉钉、微信群聊组合头像
功能生成类似钉钉.微信群聊组合头像Bitmap 可使用图片资源id.bitmap或者使用url从网络加载,传入对应数组即可网络加载时支持线程池支持磁盘缓存.内存缓存.(记得申请磁盘缓存需要的文件 ...
使用Socket实现类似微信群聊的功能
1.前言套接字(Sockets)是双向通信信道的端点.套接字可以在一个进程内,在同一机器上的进程之间,或者在不同主机的进程之间进行通信,主机可以是任何一台有连接互联网的机器. 套接字可以通过多种不同 ...
Android自定义控件---仿微信群聊(九宫格)头像
这几天找九宫格头像的源码,发现网上很少有人写(不知道是不是我的搜索关键词不准确).终于在github发现有一哥们写了一份源码,download了下来研究了一段时间,不太符合公司的产品需求 ,无奈只能放 ...
Android 仿微信群聊组合头像
转载:http://blog.csdn.net/tiantianshangcha/article/details/9836809 大概原理是先设想一个要合成的图片的大小,然后根据要合成的图片的个数以及 ...

使用伪类来实现类似微信群聊的头像样式

简介

以下是代码：

以下是实现效果：

使用伪类来实现类似微信群聊的头像样式相关推荐

最新文章

热门文章