vue 瀑布流实现

Posted 2020-10-23 anne_zhou

<div class="myWrite" v-if="list.length==0"> - 这个福宝有点懒哦 - </div>
          <div v-else class="list"> 
             <ul ref="waterfallsLeft" class="listCon waterfallsLeft" style="float:left;">
            </ul>
            <ul ref="waterfallsRight" class="listCon waterfallsRight" style="float:right">
            </ul>
            <ul ref="items" class="listCon" style="margin-left: 0px; margin-right: 0px;">
              <li class="gift" v-for="(item,index) in list" :key=‘index‘>
                <div class="giftCon">
                  <div class="top"><img :src="item.imgUrl"    width="100%"></div>
                  <div class="bottom"><p class="fl"><span class="giftname">{{item.title}}</span><span class=""><img src="" > </span></p><span class="fr likesNum">{{item.likes}}</span><span class="btn fr" v-bind:class="{btn_like:item.isLike}" @click="addLike(item.id,index)"></span></div>
                </div>
              </li>
            </ul>
          </div>

　　

export defalut{
     data(){
        return {
         leftHeight: 0,
          rightHeight: 0
        }
    }, 
      methods:{
       // 瀑布流
        // 瀑布流
    waterfalls () {
      const _this = this
            setTimeout(() => {
              this.list.forEach((v, index) => {
                let val = _this.$refs.items.children[0]
                let $img = val.children[0].children[0].children[0]
                if ($img.complete) {
                  _this.$refs.items.removeChild(val)
                  _this.addItems(val);
                } else {
                  _this.addItems(val)
                }
              })
            })
    },
    addItems (val) {
      const $l = this.$refs.waterfallsLeft,
            $r = this.$refs.waterfallsRight,
            _this = this
      if(_this.leftHeight <= _this.rightHeight){
          $l.appendChild(val)
          _this.leftHeight = $l.offsetHeight
        }else{
          $r.appendChild(val)
          _this.rightHeight = $r.offsetHeight
        }
    },
    //请求放产品的列表回调成功的里填上
   this.list=success.data.list
    this.$nextTick(function () {
              this.waterfalls()
            })
    } 
}