带demo仿照微信群头像自适应布局

带demo仿照微信群头像自适应布局

微信群组使用部分群成员的头像自适应布局,自己最近在关注张鑫旭老师的博客,看到用伪类实现的布局觉得很是巧妙,自己参考着写了demo。这个布局在图片新闻或者网站首页画廊时经常用到,故在此总结一下。案例中也复习了“蝉翼原则”中提到的符合自然规律的圆角表现方式。

使用li:first-child:nth-last-child(n)伪类选择器判断当前元素兄弟节点的个数

HTML结构代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<ul>
    <li class="list"><img src="img/1.png" /></li>
</ul>
<ul>
    <li class="list"><img src="img/1.png" /></li>
    <li class="list"><img src="img/3.png" /></li>
</ul>
<ul>
    <li class="list"><img src="img/1.png" /></li>
    <li class="list"><img src="img/3.png" /></li>
    <li class="list"><img src="img/2.png" /></li>
</ul>
<ul>
    <li class="list"><img src="img/1.png" /></li>
    <li class="list"><img src="img/3.png" /></li>
    <li class="list"><img src="img/2.png" /></li>
    <li class="list"><img src="img/5.png" /></li>
</ul>
<ul>
    <li class="list"><img src="img/1.png" /></li>
    <li class="list"><img src="img/3.png" /></li>
    <li class="list"><img src="img/2.png" /></li>
    <li class="list"><img src="img/5.png" /></li>
    <li class="list"><img src="img/4.png" /></li>
</ul>
<ul>
    <li class="list"><img src="img/1.png" /></li>
    <li class="list"><img src="img/3.png" /></li>
    <li class="list"><img src="img/2.png" /></li>
    <li class="list"><img src="img/5.png" /></li>
    <li class="list"><img src="img/4.png" /></li>
    <li class="list"><img src="img/6.png" /></li>
</ul>
<ul>
    <li class="list"><img src="img/1.png" /></li>
    <li class="list"><img src="img/3.png" /></li>
    <li class="list"><img src="img/2.png" /></li>
    <li class="list"><img src="img/5.png" /></li>
    <li class="list"><img src="img/4.png" /></li>
    <li class="list"><img src="img/6.png" /></li>
    <li class="list"><img src="img/7.png" /></li>
</ul>
<ul>
    <li class="list"><img src="img/1.png" /></li>
    <li class="list"><img src="img/3.png" /></li>
    <li class="list"><img src="img/2.png" /></li>
    <li class="list"><img src="img/5.png" /></li>
    <li class="list"><img src="img/4.png" /></li>
    <li class="list"><img src="img/6.png" /></li>
    <li class="list"><img src="img/7.png" /></li>
    <li class="list"><img src="img/8.png" /></li>
</ul>
<ul>
    <li class="list"><img src="img/1.png" /></li>
    <li class="list"><img src="img/3.png" /></li>
    <li class="list"><img src="img/2.png" /></li>
    <li class="list"><img src="img/5.png" /></li>
    <li class="list"><img src="img/4.png" /></li>
    <li class="list"><img src="img/6.png" /></li>
    <li class="list"><img src="img/7.png" /></li>
    <li class="list"><img src="img/8.png" /></li>
    <li class="list"><img src="img/9.png" /></li>
</ul>
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论