放弃实现瀑布流的第一个方案

package.json

@@ -13,7 +13,6 @@
     "core-js": "^3.8.3",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
-    "masonry-layout": "^4.2.2",
     "mitt": "^3.0.0",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",

src/views/Treasure.vue

@@ -1,157 +1,156 @@
 <template>
   <div
+    ref="gridWrapperElem"
     class="history"
     @mousemove.prevent
+    @mousemove="onMouseMove"
   >
     <div
-      ref="gridWrapperElem"
-      class="grid-wrapper"
+      class="grid"
       @mousemove.prevent
+      @mousedown="onMouseDown"
+      @mouseup="onMouseUp"
     >
       <div
-        class="grid"
+        class="grid-item"
         @mousemove.prevent
-        @mousedown="onMouseDown"
-        @mousemove="onMouseMove"
-        @mouseup="onMouseUp"
       >
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item grid-item--width2"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item grid-item--width2"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item grid-item--width2"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item grid-item--width2"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item grid-item--width2"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item grid-item--width2"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item grid-item--width2"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
-        <div
-          class="grid-item"
-          @mousemove.prevent
-        />
+        aaaa
       </div>
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      >
+        bbbb
+      </div>
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item grid-item--width2"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item grid-item--width2"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item grid-item--width2"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item grid-item--width2"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item grid-item--width2"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item grid-item--width2"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item grid-item--width2"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
+      <div
+        class="grid-item"
+        @mousemove.prevent
+      />
     </div>
   </div>
 </template>
@@ -169,7 +168,6 @@ import {
   ref,
   toRefs,
 } from 'vue'
-import Masonry from "masonry-layout"
 
 let isMouseDown = false
 let isDragged = false
@@ -194,54 +192,30 @@ function onMouseMove(e) {
 onMounted(() => {
   setTimeout(() => {
     var elem = document.querySelector('.grid')
-    var msnry = new Masonry( elem, {
-      // 所有选项都是可选的。但推荐设置下面头两个。
-      itemSelector: '.grid-item',
-      columnWidth: 160, // 默认宽度。不设置的话会用第一个item元素的宽度。可以用css selector。
-      gutter: 10, // 也可以用css selector。
-      horizontalOrder: false, // 默认false，表示往瀑布流里一张一张放图片时，是优先找最高的空位，高度一样时找最靠左的空位。如果赋值为true，则会（基本上）从左到右一行又一行地放置。
-      percentPosition: false, // 默认false，如果true，图片位置会用百分比设置，适用于自适应布局。
-      stamp: 'xxx', // 声明【要stamp的元素的选择器】，在布局时会避开这些元素的位置。
-      fitWidth: false, // 默认false，如果为true，会根据container的父元素的尺寸，和【列或item】的固定宽度，算出container fit-content时的宽度像素值，并赋予container。这样就可以通过css中margin: 0 auto;来使container左右居中。前提条件：columnWidth选项值是个固定像素值，或者item的宽度是个固定像素值。
-      originLeft: false, // 默认true，表示从左到右布局。
-      originTop: true, // 类似上一条。
-      containerStyle: { position: 'relative' }, // 这是默认值。会作为inline style加到container上。可以赋值为null。
-      transitionDuration: '0.4s', // 默认值。赋值为0来避免transition效果。
-      stagger: 30, // '0.03s'也会有同样的效果。“错开”的意思。设置这个，各个item的布局会依次执行而非同时执行。
-      resize: true, // 默认true。窗口resize时调整items的尺寸和位置。
-      initLayout: true, // 默认true。设为false则不会自动开始布局，需要手动触发。
-    })
   }, 300)
 })
 </script>
 
 <style lang="less" scoped>
 .history {
-  width: 100vw;
-  height: 100vh;
-  >.grid-wrapper {
-    width: 100vh;
-    height: 100vw;
-    overflow: auto;
-    transform: translateY(100vh) rotate(-90deg);
-    transform-origin: left top;
-    background: green;
-    &::-webkit-scrollbar { background: transparent; width: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
-    &::-webkit-scrollbar-thumb {
-      // background: rgba(220, 231, 240, 0.2);
-      // border-radius: 2px;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  &::-webkit-scrollbar { background: transparent; width: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+  &::-webkit-scrollbar-thumb {
+    // background: rgba(220, 231, 240, 0.2);
+    // border-radius: 2px;
+  }
+  >.grid {
+    >.grid-item {
+      width: 200px;
+      height: 200px;
+      background: red;
     }
-    >.grid {
-      >.grid-item {
-        width: 200px;
-        height: 200px;
-        background: red;
-      }
-      >.grid-item--width2 {
-        width: 400px;
-        height: 200px;
-        background: blue;
-      }
+    >.grid-item--width2 {
+      width: 400px;
+      height: 200px;
+      background: blue;
     }
   }
 }

yarn.lock

@@ -2728,11 +2728,6 @@ depd@~1.1.2:
   resolved "https://registry.npmmirror.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
 
-desandro-matches-selector@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.npmmirror.com/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz#717beed4dc13e7d8f3762f707a6d58a6774218e1"
-  integrity sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg==
-
 destroy@1.2.0:
   version "1.2.0"
   resolved "https://registry.npmmirror.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
@@ -3108,11 +3103,6 @@ etag@~1.8.1:
   resolved "https://registry.npmmirror.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
 
-ev-emitter@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.npmmirror.com/ev-emitter/-/ev-emitter-1.1.1.tgz#8f18b0ce5c76a5d18017f71c0a795c65b9138f2a"
-  integrity sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==
-
 event-pubsub@4.3.0:
   version "4.3.0"
   resolved "https://registry.npmmirror.com/event-pubsub/-/event-pubsub-4.3.0.tgz#f68d816bc29f1ec02c539dc58c8dd40ce72cb36e"
@@ -3297,13 +3287,6 @@ find-up@^4.0.0, find-up@^4.1.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
-fizzy-ui-utils@^2.0.0:
-  version "2.0.7"
-  resolved "https://registry.npmmirror.com/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz#7df45dcc4eb374a08b65d39bb9a4beedf7330505"
-  integrity sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==
-  dependencies:
-    desandro-matches-selector "^2.0.0"
-
 flat-cache@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmmirror.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
@@ -3400,11 +3383,6 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
     has "^1.0.3"
     has-symbols "^1.0.3"
 
-get-size@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.npmmirror.com/get-size/-/get-size-2.0.3.tgz#54a1d0256b20ea7ac646516756202769941ad2ef"
-  integrity sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==
-
 get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -4185,14 +4163,6 @@ make-dir@^3.0.2, make-dir@^3.1.0:
   dependencies:
     semver "^6.0.0"
 
-masonry-layout@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.npmmirror.com/masonry-layout/-/masonry-layout-4.2.2.tgz#d57b44af13e601bfcdc423f1dd8348b5524de348"
-  integrity sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==
-  dependencies:
-    get-size "^2.0.2"
-    outlayer "^2.1.0"
-
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@@ -4571,15 +4541,6 @@ ora@^5.3.0:
     strip-ansi "^6.0.0"
     wcwidth "^1.0.1"
 
-outlayer@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.npmmirror.com/outlayer/-/outlayer-2.1.1.tgz#29863b6de10ea5dadfffcadfa0d728907387e9a2"
-  integrity sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==
-  dependencies:
-    ev-emitter "^1.0.0"
-    fizzy-ui-utils "^2.0.0"
-    get-size "^2.0.2"
-
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmmirror.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"