From 6793e4cd3e1deec3b29141983cd93f13a73c520d Mon Sep 17 00:00:00 2001
From: luJianJun <2587063613@qq.com>
Date: Mon, 31 Jul 2023 11:42:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E7=B1=BB=E5=9E=8B=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=20=20=20=E7=80=91=E5=B8=83=E6=B5=81=E6=9B=BF=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../biserialListItem/biserialListItem.vue     |   4 +-
 .../indexWaterfallBox/indexWaterfallBox.vue   |   4 +-
 src/utils/api.js                              |   6 +-
 src/views/HomeView.vue                        | 156 ++++--------------
 src/views/detail.vue                          |  99 ++++++-----
 src/views/housingView/intermediary.vue        |  67 +++-----
 src/views/housingView/needHousing.vue         |  69 +++-----
 src/views/housingView/person.vue              |  95 ++++-------
 src/views/seachIndex.vue                      |  39 +++--
 9 files changed, 196 insertions(+), 343 deletions(-)

diff --git a/src/components/biserialListItem/biserialListItem.vue b/src/components/biserialListItem/biserialListItem.vue
index f053e7a..3c0add4 100644
--- a/src/components/biserialListItem/biserialListItem.vue
+++ b/src/components/biserialListItem/biserialListItem.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="list-item" ref="list" @click="watchInfo" :class="{'s-w-100':detailShow}">
+    <div class="item" ref="list" @click="watchInfo" :class="{'s-w-100':detailShow}">
         <img src="../../assets/homeImage/corner.svg" class="detail-tab" v-if="detailShow&&pageType==1" alt="">
         <img src="../../assets/homeImage/intermediaryCorner.svg" class="detail-tab" v-if="detailShow&&pageType==2" alt="">
         <div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1 && !detailShow">
@@ -245,7 +245,7 @@ img {
     }
 }
 
-.list-item {
+.item {
     width: 590px;
     background-color: rgba(255, 255, 255, 1);
     border: none;
diff --git a/src/components/indexWaterfallBox/indexWaterfallBox.vue b/src/components/indexWaterfallBox/indexWaterfallBox.vue
index d7926af..a0b960e 100644
--- a/src/components/indexWaterfallBox/indexWaterfallBox.vue
+++ b/src/components/indexWaterfallBox/indexWaterfallBox.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="waterfall-box" v-if="itemData.type !== 'adv'"
+    <div class="item" v-if="itemData.type !== 'adv'"
         :class="{ 'waterfall-box-housing': itemData.type === 'housing' }" @click="watchInfo">
         <div class="flexflex pos-r">
             <div class="box-tab-type" v-if="itemData.intermediarytext">
@@ -184,7 +184,7 @@ let watchAdv = () => {
     border-radius: 16px 16px 35px 16px !important;
 }
 
-.waterfall-box {
+.item {
     width: 285px;
     background: inherit;
     background-color: rgba(255, 255, 255, 1);
diff --git a/src/utils/api.js b/src/utils/api.js
index bbbd948..214555f 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -2,7 +2,7 @@ import axios from "./axios";
 
 export default{
     index:(params={})=>{//首页数据
-        return axios.get('/tenement/pc/api/home',params)
+        return axios.post('/tenement/pc/api/home',params)
     },
     getApartment:(params={})=>{//获取首页公寓数据
         return axios.get('/tenement/pc/api/home/getApartment',params)
@@ -20,13 +20,13 @@ export default{
         return axios.get('/tenement/pc/api/search',params)
     },
     getLists:(params={})=>{//获取搜索数据  个人/中介/求房源
-        return axios.post('/tenement/pc/api/lists',params)
+        return axios.get('/tenement/pc/api/lists',params)
     },
     apartment:(params={})=>{//获取公寓列表
         return axios.get('/tenement/pc/api/apartment',params)
     },
     details:(params={})=>{//房源详情
-        return axios.post('/tenement/pc/api/details',params)
+        return axios.get('/tenement/pc/api/details',params)
     },
     operation:(params={})=>{//收藏/取消收藏
         return axios.post('/tenement/pc/api/user/operation',params)
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f132040..18363ae 100644
--- a/src/views/HomeView.vue
+++ b/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(() => {
diff --git a/src/views/detail.vue b/src/views/detail.vue
index 2ad98c2..bbbc062 100644
--- a/src/views/detail.vue
+++ b/src/views/detail.vue
@@ -17,9 +17,9 @@
                                         housingInfo['data'] &&
                                         housingInfo['data'].isintermediary == 1" alt="">
                                 <div class="line" v-if="housingInfo['data'] && housingInfo['data'].info.verified
-                                ||pageType == 2 &&
-                                        housingInfo['data'] &&
-                                        housingInfo['data'].isintermediary == 1"></div>
+                                    || pageType == 2 &&
+                                    housingInfo['data'] &&
+                                    housingInfo['data'].isintermediary == 1"></div>
                                 <span class="need-houing-type" v-if="pageType == 3">预算</span>
                                 <span class="unit">HK$</span>
                                 <span class="rent" v-if="pageType != 3">{{ housingInfo['data'] &&
@@ -73,7 +73,8 @@
                                     </div>
                                 </div>
                                 <div class="concat-btn-box" :class="{ 'concat-btn-show': concatType }">
-                                    <div class="contact-btn top-contact-btn" style="margin:0 0 0 10px;" @click="getConcatData">
+                                    <div class="contact-btn top-contact-btn" style="margin:0 0 0 10px;"
+                                        @click="getConcatData">
                                         联系方式
                                     </div>
                                 </div>
@@ -85,8 +86,9 @@
                     <div class="info-box">
                         <div class="detail-price-box">
                             <span class="need-houing-type" v-if="pageType == 3">预算</span>
-                            <span class="unit" :style="{'font-size':pageType===3?'20px':''}">HK$</span><span class="rent" v-if="pageType != 3">{{
-                                housingInfo['data'] && housingInfo['data'].info.rent }}</span>
+                            <span class="unit" :style="{ 'font-size': pageType === 3 ? '20px' : '' }">HK$</span><span
+                                class="rent" v-if="pageType != 3">{{
+                                    housingInfo['data'] && housingInfo['data'].info.rent }}</span>
                             <span class="rent" v-if="pageType == 3">
                                 {{
                                     housingInfo['data'] && housingInfo['data'].info.rent[0]
@@ -145,8 +147,9 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="image-box" v-if="(housingInfo['data'] && housingInfo['data'].info && housingInfo['data'].info.video) ||
-                            (housingInfo['data'] && housingInfo['data'].info && housingInfo['data'].info.picturegroup)">
+                        <div class="image-box"
+                            v-if="(housingInfo['data'] && housingInfo['data'].info && housingInfo['data'].info.video) ||
+                                (housingInfo['data'] && housingInfo['data'].info && housingInfo['data'].info.picturegroup)">
                             <div class="dis-f al-item">
                                 <img src="../assets/img/detail/videoIcon.png" v-if="housingInfo['data'] &&
                                     housingInfo['data'].info.video &&
@@ -230,15 +233,16 @@
                                     <div class="title-box">
                                         所在楼层
                                     </div>
-                                    <div class="text"
-                                        v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.floor" :key="i"
-                                        :class="{ 'mg-l-30': i === 0 }">
-                                        {{
-                                            item == 0 ? '不限' :
-                                            indexData['data'] &&
-                                            indexData['data']['config'] &&
-                                            indexData['data']['config']['floor'][item]
-                                        }}
+                                    <div class="text">
+                                        <span v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.floor"
+                                            :key="i" :class="[i === 0 ? 'mg-l-30' : 'mg-l-10']">
+                                            {{
+                                                item == 0 ? '不限' :
+                                                indexData['data'] &&
+                                                indexData['data']['config'] &&
+                                                indexData['data']['config']['floor'][item]
+                                            }}
+                                        </span>
                                         <!-- {{ housingInfo['data'] && housingInfo['data'].info.floor }} -->
                                     </div>
                                 </div>
@@ -261,16 +265,18 @@
                                     <div class="title-box">
                                         晾晒区
                                     </div>
-                                    <div class="text"
-                                        v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.sunshinearea"
-                                        :key="i" :class="{ 'mg-l-30': i === 0 }">
-                                        {{
-                                            item == 0 ? '不限' :
-                                            indexData['data'] &&
-                                            indexData['data']['config'] &&
-                                            indexData['data']['config']['sunshinearea'][housingInfo['data'] &&
-                                                housingInfo['data'].info.sunshinearea]
-                                        }}
+                                    <div class="text">
+                                        <span
+                                            v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.sunshinearea"
+                                            :key="i" :class="[i === 0 ? 'mg-l-30' : 'mg-l-10']">
+                                            {{
+                                                item == 0 ? '不限' :
+                                                indexData['data'] &&
+                                                indexData['data']['config'] &&
+                                                indexData['data']['config']['sunshinearea'][housingInfo['data'] &&
+                                                    housingInfo['data'].info.sunshinearea]
+                                            }}
+                                        </span>
                                     </div>
                                 </div>
                                 <div class="info dis-f al-item"
@@ -449,7 +455,8 @@
                                         location && location[housingInfo['data'] && housingInfo['data']['info'].location]
                                     }}</span>
                             </div>
-                            <div class="dis-f jus-x" style="margin-top:15px;" v-if="housingInfo['data'] && housingInfo['data'].info.latitude">
+                            <div class="dis-f jus-x" style="margin-top:15px;"
+                                v-if="housingInfo['data'] && housingInfo['data'].info.latitude">
                                 <div>
                                     <mapInfo :latlng="{
                                         longitude: housingInfo['data'].info.longitude * 1,
@@ -579,8 +586,9 @@
                                 <div>
                                     如房源信息中有内容侵犯了您的合法权益，可点击屏幕右侧的举报或联系寄托方同学（微信号
                                     <el-dropdown>
-                                        <span class="text-line line-h-30" @click="clone(concatInfo.data && concatInfo.data.wechat)">{{
-                                            concatInfo.data && concatInfo.data.wechat }}</span>
+                                        <span class="text-line line-h-30"
+                                            @click="clone(concatInfo.data && concatInfo.data.wechat)">{{
+                                                concatInfo.data && concatInfo.data.wechat }}</span>
                                         <template #dropdown>
                                             <el-dropdown-menu>
                                                 <el-dropdown-item>
@@ -613,7 +621,7 @@
                                 <img src="../assets/homeImage/intermediaryTabImg.png" class="intermediary-logo" alt="">
                             </div>
                             <div class="dis-f jus-x"
-                                v-if="pageType!=2||(pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary != 1)">
+                                v-if="pageType != 2 || (pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary != 1)">
                                 <div class="user-type">
                                     {{
                                         indexData['data'] &&
@@ -642,7 +650,8 @@
                                 <div class="dis-f al-item jus-x time-box"
                                     v-if="housingInfo['data'] && housingInfo['data'].verifiedlistingcount">
                                     <img src="../assets/img/detail/presonNumIcon.png" class="icon" alt="">
-                                    <div class="dis-f al-item">认证房源 x {{ housingInfo['data'] && housingInfo['data'].verifiedlistingcount }}</div>
+                                    <div class="dis-f al-item">认证房源 x {{ housingInfo['data'] &&
+                                        housingInfo['data'].verifiedlistingcount }}</div>
                                 </div>
                             </div>
                             <div class="intermediary-info-box" v-if="housingInfo['data'] && housingInfo['data'].contacts">
@@ -744,7 +753,8 @@
         <div class="dis-f jus-x" v-if="pageType != 3 && (recommendListData.length > 0 || publisherList.length > 0)">
             <div class="body-maxWidth housing-title" style="margin-top:50px;">
                 {{ pageType == 2 && housingInfo['data'].isintermediary ? `发布者的其他房源（${publisherList.length}）` :
-                pageType == 1 && housingInfo['data'] && housingInfo['data']['info'].verified ? `发布者的其他认证房源（${publisherList.length}）`:'附近房源' }}
+                    pageType == 1 && housingInfo['data'] && housingInfo['data']['info'].verified ?
+                        `发布者的其他认证房源（${publisherList.length}）` : '附近房源' }}
             </div>
         </div>
         <div class="dis-f  jus-x al-item" style="position: relative;" v-if="pageType != 3">
@@ -1206,11 +1216,11 @@ let setNavigation = () => {
             },
             secondaryIndex: {
                 path: '/needHousing',
-                title:'求房源'
+                title: '求房源'
             }
         }
     }
-    console.log(111,store.state.routeList)
+    console.log(111, store.state.routeList)
 }
 //中介数据
 let contacts = reactive({
@@ -1236,7 +1246,7 @@ let getHousingInfo = () => {
             })
             concatInfo['data'] = store.state.indexData.wechat
             if (res.data.contacts) contacts['data'] = res.data.contacts
-            if ((pageType.value == 2 && housingInfo['data'].isintermediary)||(pageType.value ==1 && housingInfo['data']['info'].verified)) {
+            if ((pageType.value == 2 && housingInfo['data'].isintermediary) || (pageType.value == 1 && housingInfo['data']['info'].verified)) {
                 getPublisherList()
             } else if (pageType.value != 3) {
                 recommendList()
@@ -1884,8 +1894,8 @@ img {
     }
 }
 
-.top-contact-btn{
-    width:200px !important;
+.top-contact-btn {
+    width: 200px !important;
 }
 
 .contact-btn {
@@ -2036,7 +2046,7 @@ img {
         padding: 20px 10px;
         margin-top: 30px;
         box-sizing: border-box;
-        line-height:20px;
+        line-height: 20px;
 
         .business-card-btn {
             width: 100px;
@@ -2425,6 +2435,10 @@ img {
                     width: 100%;
                 }
 
+                .mg-l-10 {
+                    margin-left: 10px;
+                }
+
                 .mg-l-30 {
                     margin-left: 30px;
                 }
@@ -2481,8 +2495,9 @@ img {
         color: #7F7F7F;
         font-size: 13px;
         margin-top: 30px;
-        .line-h-30{
-            line-height:30px;
+
+        .line-h-30 {
+            line-height: 30px;
         }
 
         .wx-qrcode-s {
@@ -2535,7 +2550,7 @@ img {
         font-weight: 400;
         font-style: normal;
         color: #7F7F7F;
-        font-size:13px;
+        font-size: 13px;
 
         .houseing-info-box-s {
             padding: 0 15px;
diff --git a/src/views/housingView/intermediary.vue b/src/views/housingView/intermediary.vue
index 4e7b99d..1195abf 100644
--- a/src/views/housingView/intermediary.vue
+++ b/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);
 })
diff --git a/src/views/housingView/needHousing.vue b/src/views/housingView/needHousing.vue
index 2bff7b9..2e7c5b3 100644
--- a/src/views/housingView/needHousing.vue
+++ b/src/views/housingView/needHousing.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,16 @@ 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 +62,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 +81,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,33 +101,6 @@ let getDataList = (data) => {
     })
 }
 
-//添加数据
-let addListData = () => {
-    let num = null
-    if (pageList.tab > (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
-        console.log(dataList.data.length,20,loading.value)
-        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(() => {
@@ -146,8 +110,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);
 })
diff --git a/src/views/housingView/person.vue b/src/views/housingView/person.vue
index 4577c22..737145f 100644
--- a/src/views/housingView/person.vue
+++ b/src/views/housingView/person.vue
@@ -4,15 +4,8 @@
         <seachModule :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 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>
@@ -28,7 +21,6 @@
     <circle-btn></circle-btn>
 
     <back-to-top></back-to-top>
-
 </template>
   
 <script setup>
@@ -46,16 +38,19 @@ 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';
 
 //路由
 const router = useRouter()
 
+//瀑布实例
+let listMasonryInstance = null
 
 //获取数据
 let pages = ref(1)
-let dataList = reactive({ data: [], count: 0 })
+let dataList = reactive({ data: [], count: null })
 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(' 加载中... ')
@@ -72,14 +67,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,20 +79,22 @@ let getDataList = (data) => {
     api.getLists(postData).then(res => {
         if (res.code === 200) {
             dataList.data = res.data.data
-            if(res.data.data.length<20){
-                loadingText.value=' 到底了 '
-            }else{
-                loadingText.value=' 加载中... '
+            if (res.data.data.length < 20) {
+                loadingText.value = ' 到底了 '
+            } else {
+                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({
@@ -116,31 +105,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 = () => {
@@ -151,18 +115,25 @@ let downLoadMore = () => {
     })
 }
 
+
+let list = ref(null)
 //listImg
 onMounted(() => {
-    let {type,data}=router.currentRoute.value.query
-    let typeData = null
-    if (data) typeData = JSON.parse(data)
-    if (data && Object.keys(data).length > 0) {
-        if (type !== 'location') {
-            seachSelectData.data = { [type]: typeData.id }
-        } else {
-            seachSelectData.data = { [type]: typeData }
-        }
-    }
+    listMasonryInstance = new Masonry(list.value, {
+        itemSelector: '.item',
+        gutter: 20,
+        percentPosition: true
+    });
+    // let { type, data } = router.currentRoute.value.query
+    // let typeData = null
+    // if (data) typeData = JSON.parse(data)
+    // if (data && Object.keys(data).length > 0) {
+    //     if (type !== 'location') {
+    //         seachSelectData.data = { [type]: typeData.id }
+    //     } else {
+    //         seachSelectData.data = { [type]: typeData }
+    //     }
+    // }
     getDataList(seachSelectData.data)
     window.addEventListener('scroll', downLoadMore, true);
 })
diff --git a/src/views/seachIndex.vue b/src/views/seachIndex.vue
index 26f7fef..d138e9a 100644
--- a/src/views/seachIndex.vue
+++ b/src/views/seachIndex.vue
@@ -4,18 +4,12 @@
         <inputModule :getDataList="setSeachSelectData" :count="dataCount" ref="inputModuleInfo"></inputModule>
         <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 && seachSelectData.data.tabType !== 'apartment' && seachSelectData.data.intermediary !== ''">
-                    <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"
+                    v-show="dataList.data && dataList.data.length > 0 && seachSelectData.data.tabType !== 'apartment' && seachSelectData.data.intermediary !== ''"
+                    ref="list">
+                    <biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
                 </div>
-                <div v-show="seachSelectData.data && seachSelectData.data.tabType === 'apartment' && dataList.data && dataList.data.length > 0"
+                <div class="body-maxWidth" v-show="seachSelectData.data && seachSelectData.data.tabType === 'apartment' && dataList.data && dataList.data.length > 0"
                     ref="gridContainer">
                     <apartment-item v-for="item in listApartment" :item="item"></apartment-item>
                 </div>
@@ -56,12 +50,14 @@ let routeQuery = reactive({ data: {} })
 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 pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })//双列瀑布数据
 let seachSelectData = reactive({ data: {} })//搜索数据
 let loading = ref(true)//开关
 let loadingText = ref(` 加载中..... `)
 let listApartment = ref([])//公寓数据
 let masonryInstance = null//瀑布实例
+let listMasonryInstance = null
 provide('count', dataCount)
 
 //保存搜索设置
@@ -110,19 +106,26 @@ let getDataList = (data) => {
             dataList.data = res.data.data
             if (res.data.data.length < 20) {
                 loadingText.value = ` 到底了 `
+                loading.value = false
             } else {
                 loadingText.value = ' 加载中... '
+                loading.value = true
             }
             if (seachSelectData.data.tabType !== 'apartment') {
                 if (pages.value === 1) {
                     setInitial()
+                    pageList.value = []
                 }
                 pageList.tab = 1
                 dataList.count = res.data.count
                 dataCount.value = res.data.count
+                pageList.value = pageList.value.concat(dataList.data)
                 nextTick(() => {
-                    if (dataList.data[0]) pageList['1'].push(dataList.data[0])
-                    if (dataList.data[1]) pageList['2'].push(dataList.data[1])
+                    // if (dataList.data[0]) pageList['1'].push(dataList.data[0])
+                    // if (dataList.data[1]) pageList['2'].push(dataList.data[1])
+                    console.log('listMasonryInstance',listMasonryInstance)
+                    listMasonryInstance.reloadItems();
+                    listMasonryInstance.layout();
                 })
             } else {
                 let data = res.data
@@ -135,7 +138,7 @@ let getDataList = (data) => {
                     masonryInstance.reloadItems();
                     masonryInstance.layout();
                     if (res.data.data.length >= 20) {
-                        console.log(123)
+                        // console.log(123)
                         loading.value = true
                     }
                 })
@@ -191,8 +194,14 @@ let downLoadMore = () => {
 
 let inputModuleInfo = ref(null)
 const gridContainer = ref(null);
+const list = ref(null)
 //listImg
 onMounted(() => {
+    listMasonryInstance = new Masonry(list.value, {
+        itemSelector: '.item',
+        gutter: 20,
+        percentPosition:true
+    });
     masonryInstance = new Masonry(gridContainer.value, {
         itemSelector: '.item',
         gutter: 20