效果圖展示

Code details

<template><div class="container"><div class="block" v-for="item in list"><imgstyle="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 = 0let lineIndex = 0document.querySelectorAll(".block").forEach(item => {item.style.marginLeft = '5px'if (offsetTop !== item.offsetTop) {++lineIndexif (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>

?

?下載地址：Vue2版本六邊形蜂窩Demo-Javascript文檔類資源-CSDN下載

總結(jié)

以上是生活随笔為你收集整理的Vue2版本 六边形 蜂窝 Demo的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。