接口类型修改 瀑布流替换

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;

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);

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)

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 v-show="waterfallList.length === 0">
-          <div>
+          <skeletonBox v-for="item in noWaterfallList" :key="item">
-            <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-box s-w-100" ref="list"  v-show="waterfallList.length >0">
-              <div class="waterfall-first-box dis-f">
+          <indexWaterfallBox v-for="(item, i) in waterfallList" :data="item" :key="i"></indexWaterfallBox>
-                <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>
       </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 waterfallList = ref([])
-let noWaterfallList = reactive({ 1: 3, 2: 3, 3: 3, 4: 3 })
+let noWaterfallList = ref(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 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,12 +282,6 @@ const onPageSrcoll = (e) => {
 
 //瀑布流模块
 const router = useRouter()
-let indexWaterfallBoxCheck = (res) => {
-  console.log(res)
-  router.push({
-    path: res
-  })
-}
 
 //跳转个人房源
 let personHouseingInfo = (type, data, areaItem) => {
@@ -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)
 })
 
 onBeforeUnmount(() => {

src/views/detail.vue

@@ -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,7 +86,8 @@
                     <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">{{
+                            <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">
                                 {{
@@ -145,7 +147,8 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="image-box" v-if="(housingInfo['data'] && housingInfo['data'].info && housingInfo['data'].info.video) ||
+                        <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'] &&
@@ -230,15 +233,16 @@
                                     <div class="title-box">
                                         所在楼层
                                     </div>
-                                    <div class="text"
+                                    <div class="text">
-                                        v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.floor" :key="i"
+                                        <span v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.floor"
-                                        :class="{ 'mg-l-30': i === 0 }">
+                                            :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,9 +265,10 @@
                                     <div class="title-box">
                                         晾晒区
                                     </div>
-                                    <div class="text"
+                                    <div class="text">
+                                        <span
                                             v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.sunshinearea"
-                                        :key="i" :class="{ 'mg-l-30': i === 0 }">
+                                            :key="i" :class="[i === 0 ? 'mg-l-30' : 'mg-l-10']">
                                             {{
                                                 item == 0 ? '不限' :
                                                 indexData['data'] &&
@@ -271,6 +276,7 @@
                                                 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,7 +586,8 @@
                                 <div>
                                     如房源信息中有内容侵犯了您的合法权益，可点击屏幕右侧的举报或联系寄托方同学（微信号
                                     <el-dropdown>
-                                        <span class="text-line line-h-30" @click="clone(concatInfo.data && concatInfo.data.wechat)">{{
+                                        <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>
@@ -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">
@@ -2425,6 +2435,10 @@ img {
                     width: 100%;
                 }
 
+                .mg-l-10 {
+                    margin-left: 10px;
+                }
+
                 .mg-l-30 {
                     margin-left: 30px;
                 }
@@ -2481,6 +2495,7 @@ img {
         color: #7F7F7F;
         font-size: 13px;
         margin-top: 30px;
+
         .line-h-30 {
             line-height: 30px;
         }

src/views/housingView/intermediary.vue

@@ -4,15 +4,8 @@
         <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 v-show="dataList.data && dataList.data.length > 0" ref="list">
-                    <div ref="list">
+                    <biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
-                        <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>
                 <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])
+                listMasonryInstance.reloadItems();
-                if(dataList.data[1])pageList['2'].push(dataList.data[1])
+                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);
 })

src/views/housingView/needHousing.vue

@@ -4,15 +4,8 @@
         <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 v-show="dataList.data && dataList.data.length > 0" ref="list">
-                    <div ref="list">
+                    <biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
-                        <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>
                 <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])
+                listMasonryInstance.reloadItems();
-                if(dataList.data[1])pageList['2'].push(dataList.data[1])
+                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);
 })

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 v-show="dataList.data && dataList.data.length > 0" ref="list">
-                    <div ref="list">
+                    <biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
-                        <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>
                 <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
@@ -98,14 +85,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])
+                listMasonryInstance.reloadItems();
-                if (dataList.data[1]) pageList['2'].push(dataList.data[1])
+                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
+    listMasonryInstance = new Masonry(list.value, {
-    let typeData = null
+        itemSelector: '.item',
-    if (data) typeData = JSON.parse(data)
+        gutter: 20,
-    if (data && Object.keys(data).length > 0) {
+        percentPosition: true
-        if (type !== 'location') {
+    });
-            seachSelectData.data = { [type]: typeData.id }
+    // let { type, data } = router.currentRoute.value.query
-        } else {
+    // let typeData = null
-            seachSelectData.data = { [type]: typeData }
+    // 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);
 })

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"
+                <div class="body-maxWidth"
-                    v-show="dataList.data && dataList.data.length > 0 && seachSelectData.data.tabType !== 'apartment' && seachSelectData.data.intermediary !== ''">
+                    v-show="dataList.data && dataList.data.length > 0 && seachSelectData.data.tabType !== 'apartment' && seachSelectData.data.intermediary !== ''"
-                    <div ref="list">
+                    ref="list">
-                        <biserialItem v-for="(item, i) in pageList['1']" :key="i" :item="item" :imgLoad="watchImgLoad"
+                    <biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
-                            listId="1"></biserialItem>
                 </div>
-                    <div>
+                <div class="body-maxWidth" v-show="seachSelectData.data && seachSelectData.data.tabType === 'apartment' && dataList.data && dataList.data.length > 0"
-                        <biserialItem v-for="(item, i) in pageList['2']" :key="i" :item="item" :imgLoad="watchImgLoad"
-                            listId="2"></biserialItem>
-                    </div>
-                </div>
-                <div 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[0]) pageList['1'].push(dataList.data[0])
-                    if (dataList.data[1]) pageList['2'].push(dataList.data[1])
+                    // 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