效果图展示
Code details
<template>
<div class="container">
<div class="block" v-for="item in list">
<img
style="object-fit: cover;width: 100%;height: 100%;"
:src="portrait"
alt=""/>
</div>
</div>
</template>
<script>
//https://wlypublic.oss-cn-beijing.aliyuncs.com/image/2020-02/1581410400840.png
import portrait from '@/assets/1.jpg'
export default {
name: 'HexagonDemo4',
data() {
return {
portrait: portrait,
list: new Array(13).fill(0),
RADICAL_3: 1.7320508,
myWidth: 220,
myGap: 3
}
},
computed: {
width() {
return this.myWidth + 'px'
},
marginLeftRight() {
return this.myGap + 'px'
},
height() {
return Math.ceil(parseInt(this.width) * 1.1) + 'px';
},
marginTop() {
return ((parseInt(this.width) / -3.8) + parseInt(this.marginLeftRight)) + 'px';
}
},
created() {
setTimeout(() => {
this.arrange()
}, 5)
window.onresize = this.arrange
},
methods: {
arrange() {
let offsetTop = 0
let lineIndex = 0
document.querySelectorAll(".block").forEach(item => {
item.style.marginLeft = '5px'
if (offsetTop !== item.offsetTop) {
++lineIndex
if (lineIndex % 2 === 0) {
item.style.marginLeft = (parseInt(this.width) * 0.5 + parseInt(this.marginLeftRight) * 0.5) + 7 + 'px'
}
}
offsetTop = item.offsetTop;
// console.log(lineIndex)
// console.log(item.offsetTop)
})
}
}
}
</script>
<style lang="less" scoped>
.container {
/*display: grid;*/
margin-top: 80px;
background-color: ghostwhite;
//width: 80vw;
float: left;
/*height: 140px;*/
}
.block {
display: inline-block;
width: v-bind(width);
height: v-bind(height);
margin-right: v-bind(marginLeftRight);
margin-top: v-bind(marginTop);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
float: left;
background-color: #fff2aa;
//box-shadow: inset 0 0 50px 20px red;
}
</style>