微信朋友圈图片九宫格排版自适应

[xianzou]

ImgList.scss

.pictures-adaptive {
    display: flex;
    flex-wrap: wrap;
    .pictures {
        position: relative;
        overflow: hidden;
        margin-bottom: 2%;
        img{
            width: 100%;
        }
      }
      .pictures:only-child img{
        width: 70%;
      }
      /*  3张图片  */
      .pictures:nth-child(1):nth-last-child(3),
      .pictures:nth-child(2):nth-last-child(2),
      .pictures:nth-child(3):nth-last-child(1) 
      {
        width: 32%;
        padding-bottom: 32%;
      }
  
      /*  间隔  */
      .pictures:nth-child(2):nth-last-child(2),
      .pictures:nth-child(3):nth-last-child(1) 
      {
        margin-left: 2%;
      }
  
      .pictures:not(:nth-child(1)) img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .pictures:not(:nth-last-child(1)) img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
  
      /*  2张图片  */
      .pictures:nth-child(1):nth-last-child(2),
      .pictures:nth-child(2):nth-last-child(1),
      /*  4张图片  */
      .pictures:nth-child(1):nth-last-child(4),
      .pictures:nth-child(2):nth-last-child(3),
      .pictures:nth-child(3):nth-last-child(2),
      .pictures:nth-child(4):nth-last-child(1)
      {
        width: 49%;
        padding-bottom: 49%;
      }
  
      /* 每行的两张图片中间间隔2%的宽度 */
      /*  2张图片  */
      .pictures:nth-child(2):nth-last-child(1),
      /*  4张图片  */
      .pictures:nth-child(2):nth-last-child(3),
      .pictures:nth-child(4):nth-last-child(1)
      {
        margin-left: 2%;
      }
  
      /*  5张以上图片  */
      .pictures:nth-child(n + 5),
      .pictures:nth-child(1):nth-last-child(n + 5),
      .pictures:nth-child(1):nth-last-child(n + 5) ~ .pictures
      {
        width: 32%;
        padding-bottom: 32%;
      }
  
      .pictures:nth-child(n + 5):not(:nth-child(3n + 1)),
      .pictures:nth-child(1):nth-last-child(n + 5) ~ .pictures:not(:nth-child(3n + 1))
      {
        margin-left: 2%;
      }
}

ImgList.js

import styles from './ImgList.scss';
import React from 'react';

const ImgList = ({ pics, rowData, openPrewImg }) => {

    return (
        <div className={styles['pictures-adaptive']}>
            {
                Array.isArray(pics) && pics.map((item, index) => {
                    return (
                        <div className={styles.pictures} onClick={() => openPrewImg(pics, index, rowData)}>
                            <img src={item.fileUrl} alt="" key={index} />
                        </div>
                    );
                })
            }
        </div>
    );
};

export default ImgList;