接口类型修改 瀑布流替换

src/views/housingView/intermediary.vue

@@ -3,16 +3,9 @@
         <pageTopBar></pageTopBar>
         <seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
         <div class="dis-f jus-x al-item">
-            <div class="body-maxWidth mg-t-35">
-                <div class="dis-f jus-bet" v-show="dataList.data && dataList.data.length > 0">
-                    <div ref="list">
-                        <biserialItem v-for="(item, i) in pageList['1']" :key="i" :item="item" :imgLoad="watchImgLoad"
-                            listId="1"></biserialItem>
-                    </div>
-                    <div>
-                        <biserialItem v-for="(item, i) in pageList['2']" :key="i" :item="item" :imgLoad="watchImgLoad"
-                            listId="2"></biserialItem>
-                    </div>
+            <div class="body-maxWidth mg-t-35" >
+                <div v-show="dataList.data && dataList.data.length > 0" ref="list">
+                    <biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
                 </div>
                 <div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
                     <noList></noList>
@@ -44,12 +37,15 @@ import { ElMessage } from 'element-plus'
 import footerTool from '@/components/footer/footer.vue'
 import loadMoreText from '../../components/loadMore/loadMoreText.vue'
 import backToTop from '@/components/public/backToTop.vue'
+import Masonry from 'masonry-layout';
 
+//瀑布实例
+let listMasonryInstance = null
 //获取数据
 let pages = ref(1)
 let dataList = reactive({ data: [], count: 0 })
 let dataCount = ref(0)
-let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })
+let pageList = ref([])
 let seachSelectData = reactive({ data: {} })
 let loading = ref(true)
 let loadingText=ref(' 加载中... ')
@@ -65,14 +61,6 @@ let setSeachSelectData = (data) => {
     getDataList(seachSelectData.data)
 }
 
-//初始化列表参数
-let setInitial = () => {
-    pageList[1] = []
-    pageList[2] = []
-    pageList.height1 = 0
-    pageList.height2 = 0
-}
-
 //获取搜索数据
 let getDataList = (data) => {
     if(!loading.value)return
@@ -92,14 +80,16 @@ let getDataList = (data) => {
                 loadingText.value=' 加载中... '
             }
             if (pages.value === 1) {
-                setInitial()
+                pageList.value = []
             }
+            pageList.value = pageList.value.concat(res.data.data)
             pageList.tab = 1
             dataList.count = res.data.count
             dataCount.value = res.data.count
             nextTick(() => {
-                if(dataList.data[0])pageList['1'].push(dataList.data[0])
-                if(dataList.data[1])pageList['2'].push(dataList.data[1])
+                listMasonryInstance.reloadItems();
+                listMasonryInstance.layout();
+                if (dataList.data.length >= 20) loading.value = true
             })
         } else {
             ElMessage({
@@ -110,32 +100,6 @@ let getDataList = (data) => {
     })
 }
 
-//添加数据
-let addListData = () => {
-    let num = null
-    if (pageList.tab > (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
-        if(dataList.data.length>=20){
-            loading.value = true
-        }else{
-            loading.value = false
-        }
-        return
-    }
-    pageList.tab++
-    if (pageList.height1 > pageList.height2) {
-        num = 2
-    } else {
-        num = 1
-    }
-    pageList[num].push(dataList.data[pageList.tab])
-}
-
-//监听图片加载
-let watchImgLoad = (id, listId, height) => {
-    pageList[`height${listId}`] += height
-    addListData()
-}
-
 //加载更多
 let downLoadMore = () => {
     tool.loadMore(() => {
@@ -145,8 +109,15 @@ let downLoadMore = () => {
     })
 }
 
+let list = ref('')
+
 //listImg
 onMounted(() => {
+    listMasonryInstance = new Masonry(list.value, {
+        itemSelector: '.item',
+        gutter: 20,
+        percentPosition: true
+    });
     getDataList()
     window.addEventListener('scroll', downLoadMore, true);
 })