改用vue-waterfall2实现瀑布流布局

package.json

@@ -17,6 +17,7 @@
     "vissense": "^0.10.0",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
+    "vue-waterfall2": "^1.10.1",
     "vuex": "^3.0.0"
   },
   "devDependencies": {

src/main.js

@@ -11,6 +11,9 @@ import Vant from 'vant'
 import 'vant/lib/index.css'
 Vue.use(Vant)
 
+import waterfall from 'vue-waterfall2'
+Vue.use(waterfall)
+
 import SlideTip from "@/components/SlideTip.vue"
 Vue.component('SlideTip', SlideTip)
 
@@ -26,9 +29,10 @@ if (process.env.NODE_ENV === 'development') {
 }
 Vue.prototype.$backEndBaseUrl = 'https://culture.4dage.com/njmuseum/'
 
-document.documentElement.style.fontSize = window.innerHeight * 0.025276 + 'px'
+Vue.prototype.$oneRemToPx = window.innerHeight * 0.025276
+document.documentElement.style.fontSize = Vue.prototype.$oneRemToPx + 'px'
 window.addEventListener('resize', () => {
-  document.documentElement.style.fontSize = window.innerHeight * 0.025276 + 'px'
+  document.documentElement.style.fontSize = Vue.prototype.$oneRemToPx + 'px'
 })
 
 document.documentElement.addEventListener('touchmove', function(event) {

src/views/ExhibitionDetail.vue

@@ -157,32 +157,26 @@
       v-show="curTabIdx === 2"
       class="image-wrap"
     >
-      <div
+      <waterfall
         v-if="choosenExhibition.imageNumber !== 0"
-        class="waterfall-wrap"
+        :col="2"
+        :width="waterfallImgWidth"
+        :gutter-width="gutterWidth"
       >
-        <vue-waterfall-easy
-          :imgs-arr="imageList"
-          :mobile-gap="10"
-          class="water-fall"
-          :max-cols="2"
-          :img-width="waterfallImgWidth"
-          @click="onClickExhibitionImage"
-        >
-          <!-- 顶部item图片 -->
+        <template>
           <div
-            v-if="topItemImage !== null"
-            slot="waterfall-head"
-            class="wf-head"
-            @click="onClickTopExhibitionImage"
+            v-for="(item, index) in imageList"
+            :key="index"
+            class="cell-item"
+            :style="{marginBottom: gutterWidth - 3 + 'px'}"
           >
             <img
-              :src="topItemImage.src"
-              alt=""
+              :src="item"
+              alt="加载错误"
             >
           </div>
-        </vue-waterfall-easy>
-      </div>
+        </template>
+      </waterfall>
       <div
         v-if="choosenExhibition.imageNumber === 0"
         class="no-data"
@@ -204,12 +198,10 @@
 </template>
 
 <script>
-import vueWaterfallEasy from "vue-waterfall-easy"
 import exhibitionData from "@/exhibitionData.js"
 
 export default {
   components: {
-    vueWaterfallEasy,
   },
   data() {
     return {
@@ -220,6 +212,7 @@ export default {
       imageSrc: null,
       linkSrc: null,
       curTabIdx: 0,
+
     }
   },
   computed: {
@@ -241,17 +234,20 @@ export default {
     imageList() {
       let ret = []
       for (let index = 0; index < this.choosenExhibition.imageNumber; index++) {
-        ret.push({
-          src: `${this.$backEndBaseUrl}exhibition-data/${this.$route.query.exhibitionId}/${index + 1}.jpg`,
-        })
+        ret.push(`${this.$backEndBaseUrl}exhibition-data/${this.$route.query.exhibitionId}/${index + 1}.jpg`)
       }
-      ret.shift()
+      // ret.shift()
       return ret
     },
     waterfallImgWidth() {
-      return (window.innerWidth - 2 * 0.5 * window.innerHeight * 0.025276 - 10 * 2) / 2
+      return (window.innerWidth - this.gutterWidth - this.$oneRemToPx * 0.91 * 2) / 2 - 1 // 考虑到小数取整的误差，最后要-1以保证能放下两列。
+    },
+    gutterWidth() {
+      return this.$oneRemToPx * 0.78
     }
   },
+  watch: {
+  },
   mounted() {
   },
   destroyed() {
@@ -297,8 +293,8 @@ export default {
   height: 100%;
   box-sizing: border-box;
   overflow: hidden;
-  padding-left: 0.9rem;
-  padding-right: 0.9rem;
+  padding-left: 0.91rem;
+  padding-right: 0.91rem;
   padding-bottom: 1rem;
   display: flex;
   flex-direction: column;
@@ -482,20 +478,11 @@ export default {
   }
   > .image-wrap {
     flex: 1 1 auto;
-    .waterfall-wrap {
-      height: 100%;
-      .water-fall {
+    overflow: auto;
+    .cell-item {
+      > img {
         width: 100%;
-        height: 100%;
-        .wf-head {
-          width: 100%;
-          padding: 4px;
-          box-sizing: border-box;
-          > img {
-            width: 100%;
-            border-radius: 0.47rem;
-          }
-        }
+        border-radius: 0.47rem;
       }
     }
     > .no-data {