Image Masonry

Example

Image 1

Image 2

Image 3

Image 4

Image 5

Image 6

Image 7

Image 8

Usage

<script lang="ts">
	import { ImageMasonry } from '@fuxui/visual';

	const images = [
		{
			src: 'https://picsum.photos/200/300',
			name: 'Image 1',
			width: 200,
			height: 300,
			// optional either onclick
			onclick: () => {
				console.log('clicked');
			}
		},
		{
			src: 'https://picsum.photos/200/300',
			name: 'Image 2',
			width: 200,
			height: 150,
			// or href
			href: '#'
		},
		{
			src: 'https://picsum.photos/200/300',
			name: 'Image 3',
			width: 100,
			height: 100
		},
	];
</script>

<ImageMasonry {images} />