Vue2版本 六边形 蜂窝 Demo

效果图展示

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>

 

 下载地址：Vue2版本六边形蜂窝Demo-Javascript文档类资源-CSDN下载