瀑布流全屏

weiyunpeng · Oct 30, 2017 · 0f7db67 · 0f7db67
1 parent 59f86dc
commit 0f7db67
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 62 deletions.
diff --git a/src/api/index.js b/src/api/index.js
@@ -63,7 +63,6 @@ axios.interceptors.response.use(function (response) {
 const ROOT = (process.env.NODE_ENV === 'production')
     ? ''
     :'http://localhost:1300';
-//http://10.97.204.142:81
 function config() {
     const base = {
         baseURL: ROOT

diff --git a/src/page/user.vue b/src/page/user.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="user">
         <com-header></com-header>
-        <div class="container">
+        <div class="">
             <div class="user-info fl" v-show="isAuth">
                 <div class="Profile"  >
                     <div class="user-nike">
@@ -37,26 +37,6 @@
                         </li>
                     </ul>
                 </div>
-                <waterfall :line="line" :watch="getPhotoListFill" :line-gap="300" style="margin-top:60px">
-                    <waterfall-slot v-for="(item, flowNum) in getPhotoListFill" :width="300" :height="item.height" :order="flowNum" :key="flowNum" move-class="photo_move">
-                        <div class="panel photo_box hover_sh">
-                            <div class="img-hover" @click="showPhotoModal(item, flowNum,true)">
-                                <img :src="item.img" :width="300">
-                            </div>
-                            <div class="photo_info">
-                                <span class="photo_like" @click="photoLikeBtn(item.id,item.is_fav,flowNum,true)">
-                                    <i v-if="item.is_fav" class="icon_like_act"></i>
-                                    <i v-if="!item.is_fav" class="icon_like"></i>
-                                    {{item.fav_num}}
-                                </span>
-                                <ul>
-                                    <li v-for="(tag,t) in item.tag" :key="t">{{tag}}</li>
-                                </ul>
-                            </div>
-                        </div>
-
-                    </waterfall-slot>
-                </waterfall>
             </div>
             <div class="user-water">
                 <waterfall :line="line" :watch="getPhotoList" :line-gap="300">
@@ -132,8 +112,6 @@ export default {
     },
     mounted() {
         this.getPhotoListFill.splice(0);
-         //document.querySelector('.user-info').innerHTML = '';
-       //document.querySelector('.user-water').innerHTML = '';
         this.$store.dispatch('photoClear');
         this.loadPhoto();
         window.addEventListener('scroll', this.loadMore);
@@ -262,7 +240,7 @@ export default {
     position: relative;
     top: 5px;
     margin-bottom: 20px;
-    left: 10px;
+    left: 68px;
     overflow: hidden;
 }
 

diff --git a/src/store/modules/viewPhoto.js b/src/store/modules/viewPhoto.js
@@ -22,44 +22,37 @@ const mutations = {
         state.photoModelStatus = -1;
     },
     [PHOTO_LIST](state, data) {
-   /* 原来的代码    for(var i=0;i<Math.floor(data.list.length/4);i++){
-            state.photoListFill = state.photoListFill.concat(data.list[i]);
-        }
-        for(var j=Math.floor(data.list.length/4);j<data.list.length;j++){
-            state.photoList = state.photoList.concat(data.list[j]);
-        }*/
    // 解决bug:已登录的瀑布流间距异常问题
-        console.log(data)
-        var temp1=[];
-        var temp2=[];
-        var length= data.list.length; // 待分配数据总数
-        var buffer=0;// 缓冲区
-        var bufferLength=4;// 缓冲区总长度
-        for(var i=0;i<length;i++){
-            if(buffer==3){
-                temp1.push(data.list[i])
-            }else{
-                temp2.push(data.list[i])
-            }
-            buffer++;
-            if(buffer==bufferLength){
-                buffer=0
-            }
-            if(i==length){
-                buffer = 0
-            }
-        }
-        var h1 = document.querySelector(".user-info").offsetHeight;
-        var h2 = document.querySelector(".user-water").offsetHeight;
-        if((h1-h2)>110){
-            console.log('补差')
-            var shift = temp1.shift();
-            temp2 = temp2.concat(shift);
-        }
-        state.photoListFill = state.photoListFill.concat(temp1);
-        state.photoList = state.photoList.concat(temp2);
-        console.log(temp1.length+'   右侧：'+temp2.length)
-
+        // var temp1=[];
+        // var temp2=[];
+        // var length= data.list.length; // 待分配数据总数
+        // var buffer=0;// 缓冲区
+        // var bufferLength=4;// 缓冲区总长度
+        // for(var i=0;i<length;i++){
+        //     if(buffer==3){
+        //         temp1.push(data.list[i])
+        //     }else{
+        //         temp2.push(data.list[i])
+        //     }
+        //     buffer++;
+        //     if(buffer==bufferLength){
+        //         buffer=0
+        //     }
+        //     if(i==length){
+        //         buffer = 0
+        //     }
+        // }
+        // var h1 = document.querySelector(".user-info").offsetHeight;
+        // var h2 = document.querySelector(".user-water").offsetHeight;
+        // if((h1-h2)>110){
+        //     console.log('补差')
+        //     var shift = temp1.shift();
+        //     temp2 = temp2.concat(shift);
+        // }
+        // state.photoListFill = state.photoListFill.concat(temp1);
+        // state.photoList = state.photoList.concat(temp2);
+        // console.log(temp1.length+'   右侧：'+temp2.length)
+        state.photoList = state.photoList.concat(data.list);
         state.status = data.status;
     },
     [PHOTO_STATUS](state, data){