关于前端:Vue项目的瀑布流部分代码分析

<!-- * @Author: yang * @Date: 2020-10-18 15:58:57 * @LastEditors: yang * @LastEditTime: 2020-10-23 17:27:59 * @FilePath: \gl\src\component\index\receive.vue--><template>  <div class="about">    <p>瀑布流,点击图片可删除一个</p>    <div class="page">      <div        class="content"        v-for="(item, index) in list"        :key="item.id"        :style="{          width: waterfallW + 'px',          height: item.imgH + 'px',          left: item.left + 'px',          top: item.top + 'px',        }"        ref="col"        @click="clickMe(index)"      >        <img :src="item.image" alt="" />      </div>    </div>  </div></template><script>export default {   data() {     return {      list: [      {      image:        'http://img-agc.iqianggou.com/0a62fca1eeab88e894b93539c35446ec!180x180',      imgH: 122,      title: '题目只有1行哦长砍',      desc: 'Bon Cake(徐家汇店)这家店不要条好吃啊',      praiseNum: 322,      top: 0,      left: 0,      itemH: 0,    },    {      image:        'http://img-agc.iqianggou.com/0a62fca1eeab88e894b93539c35446ec!180x180',      imgH: 334,      title: '题目只有1行哦长砍题目只有1行哦长砍题目只有1行哦长砍',      desc:        'Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店',      praiseNum: 32232,      top: 0,      left: 0,      itemH: 0,    },    {      image:        'http://img-agc.iqianggou.com/0a62fca1eeab88e894b93539c35446ec!180x180',      imgH: 173,      title: '题目只有1行哦长砍',      desc:        'Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店',      praiseNum: 32,      top: 0,      left: 0,      itemH: 0,    },    {      image:        'http://img-agc.iqianggou.com/0a62fca1eeab88e894b93539c35446ec!180x180',      imgH: 225,      title: '题目只有1行哦长砍',      desc: 'Bon Cake(徐家汇店)这家店',      praiseNum: 32,      top: 0,      left: 0,      itemH: 0,    },    {      image:        'http://img-agc.iqianggou.com/0a62fca1eeab88e894b93539c35446ec!180x180',      imgH: 89,      title: '题目只有1行哦长砍',      desc:        'Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店',      praiseNum: 32,      top: 0,      left: 0,      itemH: 0,    },    {      image:        'http://img-agc.iqianggou.com/0a62fca1eeab88e894b93539c35446ec!180x180',      imgH: 112,      title: '题目只有1行哦长砍',      desc: 'Bon Cake(徐家汇店)这家店',      praiseNum: 32,      top: 0,      left: 0,      itemH: 0,     }      ],       initLeft:'',       waterfallW:'',       screenWidth:document.clientWidth,//屏幕宽度        gap:10,//图片之间的间距      leftH : 0,//左侧高度      rightH:0//右侧高度     }   },   created () {     this.waterfallW = (this.screenWidth-30)/2;     this.initLeft = (this.screenWidth - this.waterfallW)/2;   },   mounted () {     const nodeList = this.$refs.col;     this.doSort(nodeList)   },   methods: {    //  排序     doSort(nodeList) {       for(let i =0;i<nodeList.length;i++){         nodeList[i].style.position = 'absolute';         const domHeight = nodeList[i].clientHeight; //获取图片的高度         let top,left,itemH;        //  排列数据的模式高的在左侧,低矮的在右侧         if(this.leftH>this.rightH){//如果左侧的比右侧图片高           left = this.gap * 2 + this.waterfallW;  //右侧的left           top = this.rightH + this.gap;//图片高度加间距           itemH = domHeight;           this.rightH += this.gap + domHeight;//右侧的整体高度         }else{           left = this.gap;           top = this.leftH + this.gap;//左侧的top           itemH = domHeight;//图片的高度           this.leftH += this.gap + domHeight;//左侧的高度         }         this.list[i].top = top;         this.list[i].left = left;         this.list[i].itemH = itemH;         this.list[i].itemW = this.waterfallW;       }     },     clickMe(index){       const renderedList = this.list.slice(0,index)//失去索引前的数据       const afreshRenderList = this.list.slice(index+1)//失去点击索引后的数据       if(this.list[index].left>this.gap){//就是右侧的图片         this.rightH = this.list[index].top - this.gap //去除一个间距,被删除数据列无需重排数据的高度         this.leftH = this.checkHeight(renderedList,'left')       }else{         this.rightH = this.checkHeight(renderedList,'right')         this.leftH = this.list[index].top-this.gap//去除一个间距,被删除数据列无需重排数据的高度       }       const newList = this.restartSort(afreshRenderList)       this.list = [...renderedList,...newList]     },     //  查找不须要重新排列的数据中非被删除列的高度     checkHeight(list,col){       let needHeight = 0;       for(let i=0;i<list.length;i++){         if(col == 'left'&& list[i].left == this.gap&&list[i].top>needHeight){           needHeight = list[i].top+list[i].itemH         }else if(col = 'right'&&           list[i].left>this.gap&&           list[i].top>needHeight){             needHeight = list[i].top + list[i].itemH;           }       }       return needHeight;     },     //重新排列列表中被删除数据之后的所有数据     restartSort(list){//重排之后 长的在右边，短的在左边       const newList = list       newList.forEach((item)=>{         if(this.leftH>this.rightH){           item.left = this.gap*2+item.itemW //右侧的left           item.top = this.rightH + this.gap //右侧的top           this.rightH +=this.gap+item.itemH//右侧的高度         }else{           item.left = this.gap //左侧的left           item.top = this.leftH + this.gap //左侧的top           this.leftH += this.gap+item.itemH         }       })       return newList;     }   },}</script><style lang="scss" scoped>.page {  position: relative;  width: 100%;  height: 100%;}.content {  position: fixed;  top: 100%;  img {    display: block;    width: 100%;    height: 100%;  }}</style>