vue + vue-lazyload + babel-polyfill 实现商品图片的瀑布流布局，懒加载以及不同选项之间列表的无缝切换

一  背景

       在接手公司项目时发现在的商品列表选项之间切换时存在空白间隙的问题 ，在查看其他的网站后发现其他网站并不会出现这种现象，所以把自己的实现思路记录下来 。虽然不是最好的解决方案但是效果还可以 。详细效果查看https://www.fanlang.cn/#/  在这里只介绍图片的无缝切换 ， 瀑布流，滚动加载以及懒加载忽略。

 list:{
      deep:true,
      handler(a){
        /** 对待处理数据校验 **/
        if (!this.list instanceof Array){
          alert("只接受类型为Array的数据")
          return
        }
        /** 说明这里将父组件传过来的数据称为待处理数据  将待渲染数据成为待渲染数据  将上一次切换选项时的数据成为原始数据 **/
        /** 首次加载待渲染数据或者加载且选为空的数据  判断依据待渲染数据的length为false且页码为1 **/
        if (!this.dataList.length && this.page === 1){
          /** 此处的目的在于在下一次切换选项时确定待渲染数据的条数 **/
          localStorage.setItem("dataListLength", JSON.stringify(this.list.length));
          /** 首次渲染待渲染数据**/
          this.dataList = this.list;
          /** 切换选项时渲染待渲染数据  注意此处是实现无缝切换的关键代码  判断依据待渲染数据为true  页码为1 **/
        } else if (this.dataList.length && this.page === 1){
          let dataLength = JSON.parse(localStorage.getItem("dataListLength")), listLength = this.list.length;

            /** 如果前一次加载的原始数据条数大于待处理出局则则裁剪待渲染数据 使其待渲染数据的条数等于待处理数据 **/
            if (dataLength > listLength){
              this.dataList.splice(listLength, dataLength - listLength );
            }

            /** 如果待渲染的条数大于待处理数据的条数  则截取待渲染数据  使其等于待处理数据的条数 **/
            if (this.dataList.length > listLength){
              this.dataList.splice(listLength,this.dataList.length  - listLength );
            }

            /** 得到待渲染数据  此处必须以待待处理数据做为循环基数 原因在于待渲染数据的条数由待处理数据决定 **/
             this.list.forEach((item,index) => {
               /** 当原始数据的条数小于待处理数据的条数时改变待渲染数据中字段的值  注意不能使用set和splice **/
                 if (index < dataLength){
                     for (let key in this.dataList[index]){
                       key in item ? this.dataList[index][key] = item[key] : ""
                     }
                 }else {
                   /** 否则将待处理数据多余的选项添加到待渲染数据中 **/
                   this.dataList.push(item)
                 }
               localStorage.setItem("dataListLength", JSON.stringify(this.dataList.length));
              })
          /** 分页数据合并 **/
          }else if ( this.dataList.length && this.page > 1){
            this.dataList = this.dataList.concat(this.list);
          }else {
            return  false
        }
      }},