【国之重器】瀑布流效果

package.json

@@ -13,6 +13,7 @@
     "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/App.vue

@@ -225,6 +225,7 @@ html, body {
       margin-left: 200px;
       opacity: 0.5;
       position: relative;
+      user-select: none;
       >img.decorator {
         display: none;
       }

src/views/Treasure.vue

@@ -1,28 +1,248 @@
 <template>
-  <div class="history">
-    sfsd
+  <div
+    class="history"
+    @mousemove.prevent
+  >
+    <div
+      ref="gridWrapperElem"
+      class="grid-wrapper"
+      @mousemove.prevent
+    >
+      <div
+        class="grid"
+        @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
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { reactive, toRefs } from 'vue'
-
 export default {
   name: 'TreasureView',
-  setup () {
-    const state = reactive({
-      count: 0,
-    })
+}
+</script>
 
-    return {
-      ...toRefs(state),
-    }
+<script setup>
+import {
+  onMounted,
+  reactive,
+  ref,
+  toRefs,
+} from 'vue'
+import Masonry from "masonry-layout"
+
+let isMouseDown = false
+let isDragged = false
+const gridWrapperElem = ref('null')
+function onMouseDown() {
+  console.log('mouse down')
+  isMouseDown = true
+  isDragged = false
+}
+function onMouseUp() {
+  console.log('mouse up')
+  isMouseDown = false
+}
+function onMouseMove(e) {
+  if (isMouseDown) {
+    console.log(e)
+    gridWrapperElem.value.scrollTop -= e.movementX
+    isDragged = true
   }
 }
+
+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;
+    }
+    >.grid {
+      >.grid-item {
+        width: 200px;
+        height: 200px;
+        background: red;
+      }
+      >.grid-item--width2 {
+        width: 400px;
+        height: 200px;
+        background: blue;
+      }
+    }
+  }
 }
 </style>

yarn.lock

@@ -2728,6 +2728,11 @@ 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"
@@ -3103,6 +3108,11 @@ 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"
@@ -3287,6 +3297,13 @@ 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"
@@ -3383,6 +3400,11 @@ 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"
@@ -4163,6 +4185,14 @@ 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"
@@ -4541,6 +4571,15 @@ 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"