Componentes
Vertical 1
Horizontal 1

Paisaje

Una foto de ejemplo

Cuadrada 1
Vertical 2
Horizontal 2
Vertical 3

Montaña

Panorámica 1
Vertical 4
Layout
Efectos
Imágenes 8
Imagen 1
Imagen 2
Imagen 3
Imagen 4
Imagen 5
Imagen 6
Imagen 7
Imagen 8
Configuración JSON
{
  "images": [
    {
      "src": "https://picsum.photos/seed/masonry1/400/600",
      "alt": "Vertical 1"
    },
    {
      "src": "https://picsum.photos/seed/masonry2/400/300",
      "alt": "Horizontal 1",
      "title": "Paisaje",
      "description": "Una foto de ejemplo"
    },
    {
      "src": "https://picsum.photos/seed/masonry3/400/400",
      "alt": "Cuadrada 1"
    },
    {
      "src": "https://picsum.photos/seed/masonry4/400/500",
      "alt": "Vertical 2",
      "link": "https://example.com"
    },
    {
      "src": "https://picsum.photos/seed/masonry5/400/350",
      "alt": "Horizontal 2"
    },
    {
      "src": "https://picsum.photos/seed/masonry6/400/550",
      "alt": "Vertical 3",
      "title": "Montaña"
    },
    {
      "src": "https://picsum.photos/seed/masonry7/400/280",
      "alt": "Panorámica 1"
    },
    {
      "src": "https://picsum.photos/seed/masonry8/400/450",
      "alt": "Vertical 4"
    }
  ]
}

Galería Masonry 01

GaleriaMasonry01.vue

Galería de imágenes con layout masonry basado en CSS column-count. Soporta múltiples efectos hover (zoom, overlay, zoom-overlay), animación de entrada escalonada con IntersectionObserver, imágenes con título, descripción y enlace opcional, y diseño completamente responsive con reducción automática de columnas.

galeríamasonryimágenesgridresponsive

Props

PropTipoDefaultDescripción
imagesMasonryImage[][]Array de imágenes con src, alt, title, description y link opcionales.
columnsnumber5Número de columnas en desktop.
columnsTabletnumber3Número de columnas en tablet.
columnsMobilenumber1Número de columnas en móvil.
breakpointTabletstring'1024px'Breakpoint para cambiar a columnas tablet.
breakpointMobilestring'768px'Breakpoint para cambiar a columnas móvil.
gapstring'1rem'Espacio entre imágenes (valor CSS).
hoverEffect'none' | 'zoom' | 'overlay' | 'zoom-overlay''zoom'Efecto visual al hacer hover sobre una imagen.
animateEntrybooleantrueActiva animación fade-in al entrar las imágenes en el viewport.
borderRadiusstring'0.5rem'Border radius de cada imagen.

Interfaz MasonryImage

interface MasonryImage {
  src: string          // URL de la imagen
  alt?: string         // Texto alternativo (accesibilidad)
  title?: string       // Título mostrado en el overlay
  description?: string // Descripción mostrada en el overlay
  link?: string        // URL de enlace al hacer clic en la imagen
}

Notas

  • El layout usa CSS column-count: el navegador distribuye las imágenes en columnas equilibradas automáticamente.
  • Las imágenes que fallan al cargar se ocultan silenciosamente y el layout se redistribuye.
  • Responsive configurable: columnas independientes para desktop, tablet y móvil con breakpoints personalizables.
  • El overlay con título y descripción solo aparece si la imagen tiene alguno de estos campos.
  • Los links abren en nueva pestaña con rel="noopener noreferrer".
  • La animación de entrada usa IntersectionObserver con stagger (escalonado) y se desconecta en onUnmounted.

Ejemplo de uso

<GaleriaMasonry01
  :images="[
    { src: '/fotos/paisaje.jpg', alt: 'Paisaje', title: 'Montañas' },
    { src: '/fotos/ciudad.jpg', alt: 'Ciudad', description: 'Vista aérea' },
    { src: '/fotos/retrato.jpg', alt: 'Retrato', link: 'https://example.com' },
  ]"
  :columns="5"
  :columns-tablet="3"
  :columns-mobile="1"
  breakpoint-tablet="1024px"
  breakpoint-mobile="768px"
  gap="1rem"
  hover-effect="zoom-overlay"
  :animate-entry="true"
  border-radius="0.5rem"
/>