前端css-图片布局

一、代码

<template>
  <div class="container">
    <div class="imgContainer" v-for="(item, index) in data" :key="index">
      <img :src="sonItem" class="img" alt="" v-for="(sonItem, sonIndex) in item" :key="sonIndex">
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const data = ref<any>([])

const getData = () => {
  const imgUrl = 'https://img1.baidu.com/it/u=4251602513,3876083857&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1720890000&t=c7c780c8b2b4f44e034c3dab29d10a57'
  let imgList = []
  for (let i = 0; i < 10; i++) {
    imgList.push(imgUrl)
  }
  for (let i = 0; i < 100; i++) {
    data.value.push(imgList)
  }
  console.log('data.value :>> ', data.value);
}

getData()
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  overflow: auto;

  &::-webkit-scrollbar {
    width: 0;
  }
}

$size: calc(100vw / 9);
$translate: calc($size / 2);

.img {
  flex-shrink: 0;
  width: $size;
  height: $size;
  clip-path: polygon(50% 5%, 87% 18%, 93% 58%, 76% 95%, 25% 95%, 7% 58%, 13% 20%);

  &:hover {
    transform: scale(1.2);
  }
}

.imgContainer {
  display: flex;

  &:nth-child(even) {
    transform: translate(-$translate);
  }
}
</style>

二、 效果