VUE实现一种有趣的图片展示方式

写在前面

在网上找找一些有趣的网页设计，结果发现了这么一个Paolo Prendin，效果很好看

觉得这种设计很有意思，但是他的设计里图片总是半张半张的，只有少部分图片会刚好拼成一个，觉得不太好，就自己实现一个，我实现的是这个样子的，中间的图片总是能拼成完整的一张

1. 页面结构
   从这个页面效果就能很容易看出页面分成上下两部分，两个部分都不能滚动，然后再配上两组不换行的图片行就可以了。
   Html代码如下

  <div id="app" class="img_wall">
    <!-- 上半部图片显示区域 -->
    <div class="img_top" :style="{
      marginLeft: leftSpace.top}">
      <div class="img_block" v-for="(img, index) in imgList">
        <img :src="imgList[index].src" :key="index" :style="{
      top: imgList[index].top + 'vw'}">
      </div>
    </div>
    <!-- 下半部图片显示区域，图片显示顺序与上半部相反 -->