蜂巢布局效果

<template>
  <div class="container">
    <div class="line" v-for="(items, index) in list" :key="index">
      <div class="item" v-for="(item, index) in items" :key="index"><img
          :src="'https://picsum.photos/200/300?random='+item.id" /></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const list = ref([] as any);
for (let i = 0; i <= 5; i++) {
  const urlList = new Array();
  let startId = i * 11;
  for (let j = 0; j <= 10; j++) {
    urlList.push({ id: startId + j });
  }
  list.value.push(urlList);
}
</script>
<style lang="scss" scoped>
.container {
  overflow: hidden;
}

$n: 9;
$size: 100vw / $n;

.line {
  display: flex;
  margin-top: -$size / 6;

  &:nth-child(even) {
    transform: translateX(-$size / 2);
  }
}

.item {
  flex-shrink: 0;
  width: $size;
  height: $size;
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);

  img {
    object-fit: cover;
    cursor: pointer;
    transition: all 0.5s;
  }
  img:hover{
    transform: scale(1.2);
  }
}
</style>