写一个自适应九宫格图片栏

玖柒的小窝

修改于 2021-10-09 14:20:43

5210

修改于 2021-10-09 14:20:43

小刘同学负责企微内嵌 H5 开发，按照这个项目一贯的做法 UI 只出了移动端设计稿。今天的页面有个附件展示组件，不点击的时候大概就像微博图片那样直接九宫格展示。（点击再依据不同附件类型走各自的逻辑暂且不表）简单，对吧？小刘吭哧吭哧搞得差不多了，然后叫产品去开发环境瞅一眼。只见产品在 PC 企微客户端打开页面，横着一拉，小刘的组件就横向散开来了。一问小刘，原来长宽都是写的固定多少 rem。项目本身之前一直丢在企微移动端里展示，也就一直没考虑sizechange的情况。。。小刘改了好一会还没改好。

于是写个demo给他。

CSS:

    html,
    body {
      padding: 0;
      margin: 0;
    }
    .img-list-wrap {
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
    }
    .img-item-wrap {
      box-sizing: border-box;
      width: 33.33%;
      margin-bottom: 10px;
      padding-left: 5px;
      padding-right: 5px;
    }
    .img-item {
      box-sizing: border-box;
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      position: relative;
      overflow: hidden;
    }
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      display: inline-block;
      object-fit: cover;
    }
复制代码

HTML:

  <div class="img-list-wrap">
      <div class="img-item-wrap">
        <div class="img-item">
          <img
            src="https://wx3.sinaimg.cn/mw2000/006zCGJCly1gu3htqntrcj31400migor.jpg"
            alt=""
          />
        </div>
      </div>
      <div class="img-item-wrap">
        <div class="img-item">
          <img
            src="https://wx3.sinaimg.cn/mw2000/006zCGJCly1gu3htqntrcj31400migor.jpg"
            alt=""
          />
        </div>
      </div>
      <div class="img-item-wrap">
        <div class="img-item">
          <img
            src="https://wx3.sinaimg.cn/mw2000/006zCGJCly1gu3htqntrcj31400migor.jpg"
            alt=""
          />
        </div>
      </div>
      <div class="img-item-wrap">
        <div class="img-item">
          <img
            src="https://wx3.sinaimg.cn/mw2000/006zCGJCly1gu3htqntrcj31400migor.jpg"
            alt=""
          />
        </div>
      </div>
    </div>
复制代码

涉及到两个知识点：