用css实现朋友圈图片布局

用css实现朋友圈图片布局

htm代码如下

<ul>
  <li v-for="(item, index) in imgList" :key=index >
        <img :src="item">
    </li>
</ul>

1、首先使用flex实现正常的三列布局

ul{
   display: flex;
 justify-content: flex-start;
 flex-wrap: wrap;
}
li{
 width: 32%; 
 height: 100px;
 margin-top: 5px;
}
.list:not(:nth-child(3n)) {
 margin-right: 2%;
}

2、对于只有一张图片情况，只需用css选择器判断为一张图片时，改变图片大小即可;
知识点如下：

‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。

选择器逻辑：元素为 倒数第一个元素 && 第一个元素 时，则可判断只有一个元素：对其样式单独设置覆盖原样式即可

ul li: nth-last-child(1): first-child{
 width: 200px;
 height: 200px;
}

3、对于四张图片的情况时，图片需呈 两行两列布局：这里就需对此种情况下的第二张图片添加margin-right实现三列变两列：
选择器逻辑： 元素为 倒数第4个&& 第一个的元素 时， 判断为共有四个元素，再选择 其后的 同级元素 的第 2n 个后添加margin-right属性；

ul li: nth-last-child(4): first-child ~ li: nth-child(2n){
 width:32%;
}

再此之前需对第三个元素恢复间隔，或同朋友圈类似，四张照片是不显示间隔，如有需求也可设置其他属性，如下：（此属性需在上一条属性之前）

ul li:nth-last-child(4):first-child~li{
  width:32%;margin-right:2%
}