https://github.com/qiu-jun/vue3-justified-layout
https://github.com/qiu-jun/vue3-justified-layout
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/qiu-jun/vue3-justified-layout
- Owner: Qiu-Jun
- License: mit
- Created: 2024-09-27T13:50:20.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-11-28T03:59:37.000Z (5 months ago)
- Last Synced: 2025-03-06T04:36:06.017Z (about 2 months ago)
- Language: Vue
- Size: 6.82 MB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## vue3-justified-layout
#### Usage
```bash
pnpm add vue3-justified-layout
# or
# yarn install vue3-justified-layout
# npm install vue3-justified-layout
```
```html
![]()
添加
import { ref } from 'vue'
import Vue3JustifiedLayout from 'vue3-justified-layout'
import 'vue3-justified-layout/dist/style.css'
import type { IJLItem } from '@/components/JustifiedLayout'
import img1 from '@/assets/1.jpeg'
import img2 from '@/assets/2.jpeg'
import img3 from '@/assets/3.jpeg'
import img4 from '@/assets/4.jpeg'
const options = {
targetRowHeight: 120 // 高度
}
const test: IJLItem[] = [
{
url: img1,
width: 800,
height: 572
},
{
url: img2,
width: 6000,
height: 4000
},
{
url: img3,
width: 800,
height: 533
},
{
url: img4,
width: 1000,
height: 1418
}
]
const list = ref([...test])
const handleAdd = () => {
list.value.push(test[Math.floor(Math.random() * 4)])
}
```