接口类型修改 瀑布流替换

src/views/HomeView.vue

@@ -108,79 +108,12 @@
     </div>
     <div class="dis-f jus-x">
       <div class="body-maxWidth dis-f al-item">
-        <div class="waterfall-box s-w-100">
-          <div>
-            <div v-show="waterfallList['1'].length === 0">
-              <skeletonBox v-show="waterfallList['1'].length === 0" v-for="item in noWaterfallList['1']" :key="item">
-              </skeletonBox>
-            </div>
-            <div ref="waterfall1" v-show="waterfallList['1'].length > 0">
-              <div class="waterfall-first-box dis-f">
-                <div class="info-box dis-f jus-x al-item first" @click="indexWaterfallBoxCheck('/personHousing')">
-                  <div>
-                    <div class="img-box dis-f jus-x al-item">
-                      <img src="../assets/homeImage/person.png" class="img" alt="">
-                    </div>
-                    <div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[0].name }}</div>
-                  </div>
-                </div>
-                <div class="info-box dis-f jus-x al-item second" @click="indexWaterfallBoxCheck('/intermediaryHousing')">
-                  <div>
-                    <div class="img-box dis-f jus-x al-item">
-                      <img src="../assets/homeImage/intermediary.png" class="img" alt="">
-                    </div>
-                    <div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[1].name }}</div>
-                  </div>
-                </div>
-                <div class="info-box dis-f jus-x al-item third" @click="indexWaterfallBoxCheck('/apartment')">
-                  <div>
-                    <div class="img-box dis-f jus-x al-item">
-                      <img src="../assets/homeImage/brand.png" class="img" alt="">
-                    </div>
-                    <div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[2].name }}</div>
-                  </div>
-                </div>
-                <div class="info-box dis-f jus-x al-item" @click="indexWaterfallBoxCheck('/needHousing')">
-                  <div>
-                    <div class="img-box dis-f jus-x al-item">
-                      <img src="../assets/homeImage/seek.png" class="img" alt="">
-                    </div>
-                    <div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[3].name }}</div>
-                  </div>
-                </div>
-              </div>
-              <!-- 骨架屏 -->
-              <indexWaterfallBox v-for="(item, i) in waterfallList['1']" :data="item" :key="i"></indexWaterfallBox>
-            </div>
-          </div>
-          <div>
-            <div v-show="waterfallList['2'].length === 0">
-              <skeletonBox v-show="waterfallList['2'].length === 0" v-for="item in noWaterfallList['2']" :key="item">
-              </skeletonBox>
-            </div>
-            <div ref="waterfall2" v-show="waterfallList['2'].length > 0">
-              <indexWaterfallBox v-for="(item, i) in waterfallList['2']" :data="item" :key="i"></indexWaterfallBox>
-            </div>
-            <!-- <img src="../assets/homeImage/liveImg.svg" class="live-img" alt=""> -->
-          </div>
-          <div>
-            <div v-show="waterfallList['3'].length === 0">
-              <skeletonBox v-show="waterfallList['3'].length === 0" v-for="item in noWaterfallList['3']" :key="item">
-              </skeletonBox>
-            </div>
-            <div ref="waterfall3" v-show="waterfallList['3'].length > 0">
-              <indexWaterfallBox v-for="(item, i) in waterfallList['3']" :data="item" :key="i"></indexWaterfallBox>
-            </div>
-          </div>
-          <div>
-            <div v-show="waterfallList['4'].length === 0">
-              <skeletonBox v-show="waterfallList['4'].length === 0" v-for="item in noWaterfallList['4']" :key="item">
-              </skeletonBox>
-            </div>
-            <div ref="waterfall4" v-show="waterfallList['4'].length > 0">
-              <indexWaterfallBox v-for="(item, i) in waterfallList['4']" :data="item" :key="i"></indexWaterfallBox>
-            </div>
-          </div>
+        <div v-show="waterfallList.length === 0">
+          <skeletonBox v-for="item in noWaterfallList" :key="item">
+          </skeletonBox>
+        </div>
+        <div class="waterfall-box s-w-100" ref="list"  v-show="waterfallList.length >0">
+          <indexWaterfallBox v-for="(item, i) in waterfallList" :data="item" :key="i"></indexWaterfallBox>
         </div>
       </div>
     </div>
@@ -207,7 +140,10 @@ import store from '../store/index';
 import api from "../utils/api";
 import { ElMessage } from 'element-plus'
 import backToTop from '@/components/public/backToTop.vue'
+import Masonry from 'masonry-layout';
 
+//瀑布实例
+let listMasonryInstance = null
 // 
 let informationData = ref([
   {}, {}
@@ -263,23 +199,8 @@ let currentInstance = null
 let pagevalue = ref(0)
 //瀑布流数据
 let pages = ref(1)
-let waterfallList = reactive({ 1: [], 2: [], 3: [], 4: [] })
-let noWaterfallList = reactive({ 1: 3, 2: 3, 3: 3, 4: 3 })
-
-//判断最小值
-let getMinHeight = (data) => {
-  if (!currentInstance.ctx.$refs&&!currentInstance.ctx.$refs.waterfall1) return
-  let waterfallAll = [
-    currentInstance.ctx.$refs.waterfall1.offsetHeight,
-    currentInstance.ctx.$refs.waterfall2.offsetHeight,
-    currentInstance.ctx.$refs.waterfall3.offsetHeight,
-    currentInstance.ctx.$refs.waterfall4.offsetHeight
-  ]
-  let min = Math.min(waterfallAll[0], waterfallAll[1], waterfallAll[2], waterfallAll[3])
-  let index = waterfallAll.indexOf(min)
-  waterfallList[index + 1].push(data)
-  // console.log(index,waterfallAll)
-}
+let waterfallList = ref([])
+let noWaterfallList = ref(3)
 
 //轮播
 let bannerList = reactive({ data: [] })
@@ -291,14 +212,6 @@ let banner = () => {
   })
 }
 
-//瀑布流添加
-let addListData = (data) => {
-  data.map((res) => {
-    setTimeout(() => {
-      getMinHeight(res)
-    }, 500)
-  })
-}
 //开关
 let loadMore = ref(true)
 let loadText = ref('加载中.....')
@@ -313,7 +226,8 @@ let getRecommendList = () => {
     console.log(res)
     if (res.code === 200) {
       if (res.data.pagevalue) {
-        addListData(res.data.data)
+        if (pages.value === 1) waterfallList.value = []
+        waterfallList.value = waterfallList.value.concat(res.data.data)
         pagevalue.value = res.data.pagevalue
       }
       if (res.data.data.length >= 30) {
@@ -322,6 +236,10 @@ let getRecommendList = () => {
         loadMore.value = false
         loadText.value = '到底了'
       }
+      nextTick(() => {
+        listMasonryInstance.reloadItems();
+        listMasonryInstance.layout();
+      })
     } else {
       ElMessage({
         message: res.message,
@@ -347,7 +265,6 @@ let listDataTypeChange = (item) => {
 
 //监听滚动条
 const onPageSrcoll = (e) => {
-  if (!loadMore.value || waterfallList['4'].length === 0) return
   let body = document.documentElement ? document.documentElement : document.body ?
     document.body :
     document.querySelector('.element');
@@ -365,29 +282,23 @@ const onPageSrcoll = (e) => {
 
 //瀑布流模块
 const router = useRouter()
-let indexWaterfallBoxCheck = (res) => {
-  console.log(res)
-  router.push({
-    path: res
-  })
-}
 
 //跳转个人房源
 let personHouseingInfo = (type, data, areaItem) => {
   console.log(type, data, areaItem)
-  let areaItems={}
-  let setData=null
-  if(type==="location"){
-    areaItems=JSON.parse(areaItem)
-    setData=data.toString()
-  }else{
-    setData=data.id
+  let areaItems = {}
+  let setData = null
+  if (type === "location") {
+    areaItems = JSON.parse(areaItem)
+    setData = data.toString()
+  } else {
+    setData = data.id
   }
   router.push({
     path: `/personHousing`,
     query: {
-      [type]:setData,
-      areaItem:areaItems['id']?`${areaItems['id']}`:''
+      [type]: setData,
+      areaItem: areaItems['id'] ? `${areaItems['id']}` : ''
     },
     // params:{
     //   type,
@@ -396,14 +307,19 @@ let personHouseingInfo = (type, data, areaItem) => {
   })
 }
 
+const list = ref(null)
+
 onMounted(() => {
+  listMasonryInstance = new Masonry(list.value, {
+    itemSelector: '.item',
+    gutter: 20,
+    percentPosition: true
+  });
   document.documentElement.scrollTop = 0
   currentInstance = getCurrentInstance()
-  setTimeout(() => {
-    getRecommendList()
-    banner()
-    window.addEventListener('scroll', onPageSrcoll, true);
-  }, 1000)
+  getRecommendList()
+  banner()
+  window.addEventListener('scroll', onPageSrcoll, true);
 })
 
 onBeforeUnmount(() => {