78 lines
No EOL
1.2 KiB
Text
78 lines
No EOL
1.2 KiB
Text
---
|
|
import { Picture } from 'astro:assets';
|
|
|
|
interface Props {
|
|
images: {
|
|
src: ImageMetadata;
|
|
alt: string;
|
|
}[];
|
|
columns?: number;
|
|
}
|
|
|
|
const { images, columns = 5 } = Astro.props;
|
|
---
|
|
|
|
<div class="masonry-gallery" style={`--columns: ${columns}`}>
|
|
{images.map((image, index) => (
|
|
<div class="gallery-item">
|
|
<Picture
|
|
src={image.src}
|
|
alt={image.alt}
|
|
widths={[300, 500, 800]}
|
|
formats={['webp']}
|
|
data-index={index}
|
|
loading={index < 12 ? 'eager' : 'lazy'}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<style>
|
|
.masonry-gallery {
|
|
columns: var(--columns, 5);
|
|
column-gap: 20px;
|
|
padding: 40px 20px 100px;
|
|
max-width: 100%;
|
|
background: #000;
|
|
}
|
|
|
|
.gallery-item {
|
|
position: relative;
|
|
break-inside: avoid;
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
background: #000;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gallery-item img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.gallery-item:hover img {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
@media (max-width: 959px) {
|
|
.masonry-gallery {
|
|
columns: 3;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.masonry-gallery {
|
|
columns: 2;
|
|
padding: 40px 10px 100px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.masonry-gallery {
|
|
columns: 1;
|
|
padding: 40px 15px 100px;
|
|
}
|
|
}
|
|
</style> |