实现微信朋友圈图片布局之二

写在前面

之前写过实现微信朋友圈图片布局 （实现微信朋友圈图片布局 - 掘金 (juejin.cn)），后面发现如果点进自己的朋友圈，会有一个缩略图效果，感觉布局还是挺有意思的（见下方图片），想着实现一下，所以又让我水了一篇(bushi~)

思路

我们观察到，图片的布局情况是 1 X 1 、2 X 2 、3 X 3 的变体，并且都是矩形，grid 布局不就是干这事的吗？所以取1、2、3 的最小公倍数6 ，将div 元素划分为6 X 6的网格，就可以很方便得实现该布局。

为了实现图片的动态加减和随着图片个数切换class ，引入了vue进行操作。

当然，只是用纯CSS选择器也可以达到切换样式的效果，不过代码过于冗长，如有需要，参考上一篇的实现方式（即元素的后代选择器方式）即可。

具体方法

效果图

先贴下完整代码（直接复制粘贴即可运行）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html, body, div, img {
      padding: 0;
      margin: 0;
      border: 0;
    }
    .main {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
    .album {
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(6, 50px);
      grid-template-rows: repeat(6, 50px);
      grid-column-gap: 5px;
      grid-row-gap: 5px;
      background-color: #f9f9f9;
    }
    .album img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .album.one img {
      grid-column: span 6;
      grid-row: span 6;
    }
    .album.two img {
      grid-column: span 3;
      grid-row: span 6;
    }
    .album.three img {
      grid-column: span 3;
      grid-row: span 3;
    }
    .album.three img:nth-child(1) {
      grid-column: span 3;
      grid-row: span 6;
    }
    .album.four img {
      grid-column: span 3;
      grid-row: span 3;
    }
    .album.five img {
      grid-column: span 2;
      grid-row: span 2;
    }
    .album.five img:nth-child(1) {
      grid-column: span 4;
      grid-row: span 4;
    }
    .album.five img:nth-child(2) {
      grid-column: span 2;
      grid-row: span 4;
    }
    .album.six img {
      grid-column: span 2;
      grid-row: span 2;
    }
    .album.six img:nth-child(1) {
      grid-column: span 4;
      grid-row: span 4;
    }
    .album.seven img {
      grid-column: span 2;
      grid-row: span 2;
    }
    .album.seven img:nth-child(1), .album.seven img:nth-child(2) {
      grid-column: span 2;
      grid-row: span 4;
    }
    .album.eight img {
      grid-column: span 2;
      grid-row: span 2;
    }
    .album.eight img:nth-child(1){
      grid-column: span 2;
      grid-row: span 4;
    }
    .album.nine img{
      grid-column: span 2;
      grid-row: span 2;
    }
    .item {
      display: flex;
      margin: 10px auto;
    }
    .item div {
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      margin: 10px;
      padding: 10px;
      background-color: #2a82e4;
      color: #fff;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="app" class="main">
  <div class="item">
    <div v-for="item in arr" @click="handleChange(item)">
      {{item}}
    </div>
  </div>
  <div :class="'album ' + layoutClass">
    <img v-for="(image, index) in images" :src="image.src" :key="index" alt="">
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      image: { src: 'https://img0.baidu.com/it/u=3103543078,1541847622&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=618' },
      images: [

      ],
      arr: ['1', '2', '3', '4', '5', '6', '7', '8', '9']
    },
    computed: {
      layoutClass() {
        const classes = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
        const count = this.images.length;
        if (count >= 1 && count <= 9) {
          return classes[count - 1];
        } else {
          return 'default-layout';
        }
      }
    },
    methods: {
      handleChange(item) {
        let arr = [];
        for(let i = 0; i < item; i++) {
          arr.push(this.image);
        }
        this.images = arr;
      }
    }
  });
</script>
</body>
</html>

使用计算属性layoutClass进行根据图片数量切换不同的class

1 张图片

css 复制代码

.album.one img {
  grid-column: span 6;
  grid-row: span 6;
}

占据全部的6 X 6（即6行6列）区域即可

2 张图片

css 复制代码

.album.two img {
  grid-column: span 3;
  grid-row: span 6;
}

两张图片都是6 X 3区域

3 张图片

css 复制代码

.album.three img {
  grid-column: span 3;
  grid-row: span 3;
}
.album.three img:nth-child(1) {
  grid-column: span 3;
  grid-row: span 6;
}

先实现应用元素多的样式，即3 X 3

再对第一个元素特殊处理，实现6 X 3

4 张图片

css 复制代码

.album.four img {
  grid-column: span 3;
  grid-row: span 3;
}

都是3 X 3

5 张图片

css 复制代码

.album.five img {
  grid-column: span 2;
  grid-row: span 2;
}
.album.five img:nth-child(1) {
  grid-column: span 4;
  grid-row: span 4;
}
.album.five img:nth-child(2) {
  grid-column: span 2;
  grid-row: span 4;
}

先实现底部三个元素，即2 X 2

处理第一张，4 X 4

处理第二张，4 X 2

6 张图片

css 复制代码

.album.six img {
  grid-column: span 2;
  grid-row: span 2;
}
.album.six img:nth-child(1) {
  grid-column: span 4;
  grid-row: span 4;
}

除了第一张是4 X 4 ，其余都是2 X 2

7 张图片

css 复制代码

.album.seven img {
  grid-column: span 2;
  grid-row: span 2;
}
.album.seven img:nth-child(1), .album.seven img:nth-child(2) {
  grid-column: span 2;
  grid-row: span 4;
}

一、二都是4 X 2 ，其余都是2 X 2

8 张图片

css 复制代码

.album.eight img {
  grid-column: span 2;
  grid-row: span 2;
}
.album.eight img:nth-child(1){
  grid-column: span 2;
  grid-row: span 4;
}

除了第一张是4 X 2 ，其余都是2 X 2

9 张图片

css 复制代码

.album.nine img{
  grid-column: span 2;
  grid-row: span 2;
}

都是2 X 2

写下来就是感觉复习了一遍grid 布局，主要还是对CSS的操作，有点暴力解法的意思，因为没有找到固定的规律。当然，还有优化空间。如果您有更好的想法，欢迎沟通。

实现微信朋友圈图片布局之二

写在前面

思路

具体方法

效果图

1 张图片

2 张图片

3 张图片

4 张图片

5 张图片

6 张图片

7 张图片

8 张图片

9 张图片

More