vue 简易照片墙

部门平台首页弄个照片墙展示人员风采，组件代码如下：

<template>
  <div class="photo">
    <div class="container" v-for="(path, cl) in info">
      <div :class="`box imgi ${status1} ${status2 + cl}`  " ref="path"><img :src="path"></div>
    </div>
  </div>
</template>

<style>     //样式是写死的，本想动态计算坐标和旋转角度，但是效果不好，写死将就用。
.container {
  width: 80%;
  height: 100%;
  margin: 80px 70px;
  position: relative;
}

.box {
  width: 210px;
  transition: 0.1s;
  height: 100%;
  -moz-transition: 1s;
  -webkit-transition: 1s;
  position: absolute;
}

img {
  width: 100%;
  padding: 10px 10px 15px 10px;
  border: 1px solid #ddd;
  /*position:absolute;  */

  z-index: 1;
}

.box:hover {
  -webkit-transform: rotate(0deg) !important;
  transform: scale(1.5) !important;
  -webkit-transform: scale(1.5) !important;
  box-shadow: 4px 4px 10px #ccc !important;
  -moz-box-shadow: 4px 4px 10px #ccc !important;
  -webkit-box-shadow: 4px 4px 10px #ccc !important;
  z-index: 1 !important;

}

.imgi {
  margin-left: 50%;
  top: 0px;
  left: 0px;
  -webkit-transform: rotate(0deg);
}

.i {
  margin-left: 10%;
  top: 0px;
  left: 0px;
  -webkit-transform: rotate(0deg);
}


.img1 {
  margin-left: 50%;
  top: 250px;
  left: -700px;
  -webkit-transform: rotate(-40deg);
}

.img2 {
  top: 10px;
  left: -60px;
  -webkit-transform: rotate(-20deg);
}

.img3 {
  top: 0px;
  left: 600px;
  -webkit-transform: rotate(-20deg);
}

.img4 {
  top: 10px;
  left: 1100px;
  -webkit-transform: rotate(10deg);
}

.img5 {
  top: 300px;
  left: 600px;
  -webkit-transform: rotate(30deg);
}

.img6 {
  top: 10px;
  left: 800px;
  -webkit-transform: rotate(-10deg);
}


.img7 {
  top: 100px;
  left: 400px;
  -webkit-transform: rotate(20deg);
}

.img8 {
  top: 350px;
  left: 1050px;
  -webkit-transform: rotate(30deg);
}

.img9 {
  top: 200px;
  left: 900px;
  -webkit-transform: rotate(40deg);
}

.img10 {
  top: 200px;
  left: 1200px;
  -webkit-transform: rotate(50deg);
}

.img11 {
  top: 00px;
  left: 300px;
  -webkit-transform: rotate(50deg);
}

.img12 {
  top: 200px;
  left: 300px;
  -webkit-transform: rotate(50deg);
}

.img13 {
  top: 400px;
  left: 700px;
  -webkit-transform: rotate(-10deg);
}

.img14 {
  top: 300px;
  left: 250px;
  -webkit-transform: rotate(-30deg);
}

.img15 {
  top: 300px;
  left: 200px;
  -webkit-transform: rotate(40deg);
}

.img0 {
  top: 00px;
  left: 500px;
  -webkit-transform: rotate(0deg);
}

</style>

<script>
export default {
  name: "container",
  data() {
    return {
      status1: '',
      status2: '',
      info: this.getList(),
      infos: ['../assets/pic/', '', '']
    }
  },
  created() {
    this.getList()
    setTimeout(() => {
      this.status1 = 'i'
    }, 1000);
    setTimeout(() => {
      this.status2 = 'img'
    }, 1100)    //两个setTimeout，为了动态追加元素样式，增加点动效
  },
  methods: {
    getList() {
      this.p_l = { 'img1': 'xx.png', 'img2': 'xx.png', 'img3': 'xx.jpg', 'img4': 'xx.jpg', 'img5': 'xx.png', 'img6': 'xx.jpg', 'img7': 'xx.jpg', 'img8': 'xx.jpg', 'img9': 'xx.jpg', 'img10': 'xx.jpg', 'img11': 'xx.jpg', 'img12': 'xx.jpg', 'img13': 'xx.jpg', 'img14': 'xx.jpg', 'img15': 'xx.png', 'img16': 'xx.png' }    //这里可以使用数组，由于开始想复杂了，所以用了对象。
      var phono = []
      for (let i in this.p_l) {
        phono.push(require('../assets/pic/' + this.p_l[i]))    //获取照片
      }
      return phono
    }
  }
}
</script>

下图是效果，放到首页使用，可以监听路由，不影响二级路由。