修改详情瀑布流 改为4列

src/components/indexWaterfallBox/indexWaterfallBox.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="item" v-if="itemData.type !== 'adv'" :class="{ 'waterfall-box-housing': itemData.type === 'housing' }" @click="watchInfo">
+    <div class="item" v-if="itemData.type !== 'adv'" :class="{ 'waterfall-box-housing': itemData.type === 'housing', 'isdetail': isdetail }" @click="watchInfo">
         <div class="flexflex pos-r">
             <img class="intermediary-type" v-if="itemData.isintermediary" src="@/assets/homeImage/intermediaryTabImg.png" />
             <div class="box-tab-type" v-else-if="itemData.intermediarytext">
@@ -105,6 +105,9 @@ const props = defineProps({
     listMasonryInstance: {
         type: Object,
     },
+    isdetail: {
+        type: Boolean,
+    },
 })
 
 const imgload = () => {
@@ -429,6 +432,7 @@ const loadload = index => {
 .apartment-top {
     border-radius: 0;
     height: 38px;
+    padding-top: 10px;
 }
 
 .apartment-text {
@@ -483,4 +487,13 @@ const loadload = index => {
     -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
     box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
 }
+
+.isdetail {
+    &.item {
+        width: 211.5px;
+        .apartment-img {
+            width: 201.5px;
+        }
+    }
+}
 </style>

src/views/detail.vue

@@ -561,8 +561,8 @@
         <div class="dis-f jus-x al-item" style="position: relative;" v-if="pageType != 3">
             <div>
                 <div class="body-maxWidth" v-show="recommendListData.length > 0">
-                    <div ref="gridContainer" style="margin-top: 15px; display: flex; flex-wrap: wrap; margin-bottom: 50px; width: 876px;">
-                        <indexWaterfallBox v-for="items in recommendListData" :data="items" :key="items.id"> </indexWaterfallBox>
+                    <div class="gridContainer" ref="gridContainer" style="margin-top: 15px; display: flex; flex-wrap: wrap; margin-bottom: 50px; width: 876px;">
+                        <indexWaterfallBox v-for="items in recommendListData" :data="items" :key="items.id" :listMasonryInstance="masonryInstance" :isdetail="true"> </indexWaterfallBox>
                     </div>
                 </div>
                 <div class="body-maxWidth" v-if="publisherList.length > 0">
@@ -836,8 +836,7 @@ let scrollWidth = ref(null)
 let scrollMove = false
 //点击方向按钮
 let moveImageList = type => {
-
-    console.log("type",type,imgListTab.value,imageLIstLeft);
+    console.log("type", type, imgListTab.value, imageLIstLeft)
     if (type === "right" && imgScrollBottom()) return
     if ((type === "left" && imgListTab.value === 0) || (imgListTab.value === imageLIstLeft.value.length - 1 && type === "right")) return
     type === "left" ? imgListTab.value-- : imgListTab.value++
@@ -1226,6 +1225,8 @@ watch(route, () => {
     distanceSchool()
 })
 
+// const gridContainer = ref(null)
+
 onMounted(() => {
     let { id } = router.currentRoute.value.query
     uniqid.value = id
@@ -1240,6 +1241,11 @@ onMounted(() => {
         window.addEventListener("scroll", onPageSrcoll)
         document.body.scrollTop = 0
     }
+
+    // listMasonryInstance = new Masonry(gridContainer.value, {
+    //     itemSelector: ".item",
+    //     gutter: 20,
+    // })
 })
 
 onBeforeUnmount(() => {
@@ -1318,8 +1324,6 @@ const selectAcademyIndex = index => {
     elscrollbarRef.value.setScrollTop(0)
 }
 
-
-
 // 选择附近学校距离的学校下标
 const selectIndex = id => {
     if (!id) id = pitchSchool
@@ -1333,6 +1337,8 @@ const selectIndex = id => {
 
     // showDistance.value = true
 }
+
+let listMasonryInstance = null
 </script>
 <style scoped lang="less">
 img {
@@ -3162,4 +3168,5 @@ img {
         }
     }
 }
+
 </style>