css实现朋友圈照片排列布局的代码

  发布时间:2020-06-10 15:48:54   作者:庞永胜   我要评论
纯css实现朋友圈不同数量图片不同布局,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

首先可以打开朋友圈观察不同图片数量的几种布局,也可参考下图示例;

可以发现除1张图片,4张图片特殊外,其他数量图片均使用一行三列的方式排列;

假设有如下HTML代码,这里imgList是一个图片地址数组;

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

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

设置为换行,每个元素占1/3或指定宽度,除每行最后一个元素(3n)都设置margin-right并通过预留间隔;

1
2
3
4
5
6
7
8
9
10
11
12
13
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选择器判断为一张图片时,改变图片大小即可;

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

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

 

3、对于四张图片的情况时,图片需呈 两行两列布局:这里就需对此种情况下的第二张图片添加margin-right实现三列变两列:

选择器逻辑: 元素为 倒数第4个 && 第一个的元素时, 判断为共有四个元素,
再选择 其后的 同级元素 的第 2n 个后添加margin-right属性;

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

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

1
2
3
4
ul li: nth-last-child(4): first-child , ul li: nth-last-child(4): first-child ~ li{
  width: 50%;
  margin-right: 0;
}

总结

到此这篇关于css实现朋友圈照片排列布局的文章就介绍到这了,更多相关css 图片排列布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

蓄力AI

相关文章

  • CSS实现动态图片的九宫格布局的实例代码

    这篇文章主要介绍了CSS实现动态图片的九宫格布局的实例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-03
  • css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局

    这篇文章主要为大家介绍了正方形图片使用CSS如何实现成圆形布局,不使用PS软件处理,直接使用DIV CSS布局如何实现图片圆形化,具体实现过程请看下文
    2014-10-10
  • DIV+CSS中让布局、背景图片、文字内容居中的方法

    这篇文章主要为大家介绍了在DIV+CSS布局的页面里,让布局、背景图片、文字内容居中的方法,从布局内容到页面里文章文字居中都是非常重要的,而css来设置居中也是非常简单的
    2014-10-09
  • css中文字加图片的布局实现

    在文章中难免会出现表情,在在这种情况下如何以比较合理的方式显示文字与表情呢?其实很简单,通过简单几行CSS样式便可实现,感兴趣的朋友可以了解下
    2013-09-06
  • input输入框中有图片怎么使用css布局实现

    input框中有图片的情况下如何使用css实现,为了美观、形象,一般都会在用户名,密码等输入框中加一个图片,其实很简单,具体的实现如下,感兴趣的朋友可以参考下
    2013-08-01
  • 用CSS布局复杂的图片边框实例

      这只是一个布局实例,学习CSS有用处,因为这个用来修饰图片的边框做的不错,主要是想了解如何用CSS实现这种布局,在相对、绝对定位,或者是在多种浏览器不失真、不
    2009-11-04

最新评论