CSS完成动态性照片的9宫格合理布局的案例编码

日期:2021-01-20 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

前提条件标准: content="width=750"

<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover">

实际效果图以下:

 

要求剖析

高宽:

1张图【宽320,高320】[2倍稿规格]
2张图时【宽332,高332】
3张图、4张图、6张图,7张图、9张图时【宽220,高220】
5张图、8张图时【第4、第5张宽高332】,【其余220】

间隔:

2张时,【最终1张】仅有left方位margin
3张时,【第2张】上下margin
4张时,【第2张】和【最终1张】都仅有left方位的margin,【3,4】有top方位的margin
5张时,【最终1张】仅有left方位margin
6张、7张时,【第2张、第4张】有上下margin,从【第4张起】top有
8张时,【第2张、第4张】时上下margin,从【第4张起】top有,【最终1张】仅有left
9张时,【第2张、第4张、第8张】有上下margin

圆角10:

1张图时【都有】圆角
2张图时、3张图-【第1张左上、左下】,【最终1张右上,右下】
4张图时【第1张左上】,【第2张右上】,【第3张左下】,【最终1张右下】
5张图时【第1张左上】,【第3张右上】,【第4张左下】,【最终1张右下】
6张图时【第1张左上】,【第3张右上】,【第4张左下】,【最终1张右下】
7张图时【第1张左上】,【第3张右上】,【第7张左下、右下】
8张图时【第1张左上】,【第3张右上】,【第7张左下】,【最终1张右下】
9张图时【第1张左上】,【第3张右上】,【第7张左下】,【最终1张右下】

梳理法

大伙儿在初中的情况下都学过数学课的梳理法,便是1个命题先求出n=1的情况下创立,随后假定n=k创立,证实n=k+1同样成立,从而证得命题在n=k【k=随意实数】的情况下都创立。

编码

<div class="grid-img-box">
    <van-image class='grid-img' v-for="value in data.photo" :key="value"  fit="cover" :src="value" />
</div>

.grid-img{

  /**
  宽高
    1. 3n+1且是倒数第2张时
    2. 3n+1且是最终1张时
      以上两种状况照片的宽高均应为320;
      剩下两种状况是:
    3. 仅有1张时宽高320;
    4. 其余的状况和数据库索引宽高都为220;
  */
  display: inline-block;
  width: 220px;
  height: 220px;
  &:only-child{
    width: 320px;
    height: 320px;
  }

  &:nth-child(3n+1):nth-last-child(2),
  &:nth-child(3n+2):last-child{
    width: 332px;
    height: 332px;
  }

  /**
  间隔/合理布局
   */

  &:nth-child(3n+2){
    margin: 0 6px;
  }
  &:nth-child(n+4){
    margin-top: 6px;
  }

  &:first-child{
    border-top-left-radius: 10px;
  }

  &:last-child{
    margin-right: 0;
    border-bottom-right-radius: 10px;
  }

  /**
  圆角
   */

  //左下圆角:最终1行第1个
  &:nth-child(3n+1){
    &:last-child,
    &:nth-last-child(2),
    &:nth-last-child(3){
      border-bottom-left-radius: 10px;
    }
  }

  //解决4个合理布局
  //增大第2个margin讲第3个挤到下1行
  &:nth-child(2):nth-last-child(3){
    margin-right: 220px;
  }
  //重设第2个圆角
  &:nth-child(2):nth-last-child(3){
    border-top-right-radius: 10px;
  }

  //重设第3个的margin和radius
  &:nth-child(3):nth-last-child(2){
    margin-top: 6px;
    margin-right: 6px;
    border-radius: 0 0 0 10px;
  }
  //重设第4个的圆角
  &:nth-child(4):last-child{
     border-radius: 0 0 10px 0;
  }
}

总结

到此这篇有关CSS完成动态性照片的9宫格合理布局的文章内容就详细介绍到这了,更多有关css 9宫格合理布局內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!

上一篇:CSS根据letter 返回下一篇:没有了