实现微信朋友圈图片布局

写在前面

除了常见的3列的朋友圈图片格式，发一张图和四张图的朋友圈，布局确实又有点不同，一时兴起想实现下。

思路

我们可以观察到的是：除了一张和四张图片的情况，其他图片都是规规矩矩得在3 X 3表格中找到自己的位置，那么我们只要对一张和四张图片进行特殊处理。

1 张图片

一张图片是任性的，它不受正方形的约束，按原比例完完整整得展示自己全部得宽高，但是，真的这么随心所欲吗？我测试了宽高比低和宽高比高的如下两种情况

原来宽度也是在约束之中的，不会超过3列情况下2列 + 1*边距的范围，这么看来高度貌似更为自由，我们再把图片裁细试试？

好的，看来高度确实是自由的。

人生的宽度是有限的，高度是无限的 这或许是微信设计师想告诉我们的道理

好了，让我们进入正题

具体方法

效果图

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

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;
      width: 30.2vw;
      background-color: #f9f9f9;
      display: flex;
      flex-wrap: wrap;
    }
    .album img {
      width: 10vw;
      height: 10vw;
      object-fit: cover;
      display: block;
      margin-top: 0.1vw;
    }
    .album img:not(:nth-child(3n)) {
      margin-right: 0.1vw;
    }
    .album img:nth-child(1), .album img:nth-child(2), .album img:nth-child(3) {
      margin-top: 0;
    }
    .album img:only-child {
      width: initial;
      height: initial;
      max-width: 20.1vw;
    }
    .album img:nth-child(2):nth-last-child(3) {
      margin-right: 10.1vw;
    }
    .album img:nth-child(3):nth-last-child(2) {
      margin-right: 0.1vw;
      margin-top: 0.1vw;
    }
    .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">
    <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://img1.baidu.com/it/u=2205560513,2700243422&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500' 
      },
      images: [],
      arr: ['1', '2', '3', '4', '5', '6', '7', '8', '9']
    },
    methods: {
      handleChange(item) {
        let arr = [];
        for(let i = 0; i < item; i++) {
          arr.push(this.image);
        }
        this.images = arr;
      }
    }
  });
</script>
</body>
</html>

边距、图片放缩等

css 复制代码

.album img {
  width: 10vw;
  height: 10vw;
  object-fit: cover;
  display: block;
  margin-top: 0.1vw;
}
.album img:not(:nth-child(3n)) {
  margin-right: 0.1vw;
}
.album img:nth-child(1), .album img:nth-child(2), .album img:nth-child(3) {
  margin-top: 0;
}

object-fit: cover;是截取图片符合比例的部分，不失真

将img设置为display: block;是为了去除图片元素自带的外边距，当然也有其他方法

.album img:not(:nth-child(3n))选中的是除了第3列之外的元素，只有它们有右边距

.album img:nth-child(1), .album img:nth-child(2), .album img:nth-child(3)选中的是第一行的元素，只有它们没有上边距

1 张图片

css 复制代码

.album img:only-child {
  width: initial;
  height: initial;
  max-width: 20.1vw;
}

.album img:only-child只针对只有一张图片的情况下起作用

宽高保持原比例，但是限制了最大宽度

4 张图片

css 复制代码

.album img:nth-child(2):nth-last-child(3) {
  margin-right: 10.1vw;
}
.album img:nth-child(3):nth-last-child(2) {
  margin-right: 0.1vw;
  margin-top: 0.1vw;
}

.album img:nth-child(2):nth-last-child(3)的意思是元素为顺数第2个 且为倒数第3个 ，只有图片个数为4的情况可以满足

通过加大margin-right来实现第二张图片的换行效果

你可以在object-fit - CSS：层叠样式表 | MDN (mozilla.org)找到更多关于object-fit的相关内容

实现微信朋友圈图片布局

写在前面

思路

1 张图片

具体方法

效果图

边距、图片放缩等

1 张图片

4 张图片

More