蜂巢布局效果
<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>
本文来自博客园,作者:小珍珠在河里敲代码,转载请注明原文链接:https://www.cnblogs.com/Jansens520/p/18070197