|
|
@@ -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>
|
任一存