0
214
Vistas¿Por qué el paquete Masonry Javascript no se inicializa?
Soy muy nuevo en Javascript y esta es la primera vez que uso el paquete Masonry. Estoy tratando de tener imágenes de la Imagen astronómica del día de la NASA para mostrarlas en una cuadrícula de mampostería y se muestran, pero no en el formato de cuadrícula de mampostería y no puedo entender por qué. ¿Qué estoy haciendo mal? ¡Gracias! (Clave API reemplazada por XXXXXX por razones obvias).
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script> <script defer src="script.js"></script> <title>NASA Astronomy Picture of the Day</title> </head> <body> <header> <h1>NASA Astronomy Picture of the Day</h1> </header> <main> <div class="grid"> </div> </main> </body> </html>JavaScript:
'use strict'; window.addEventListener('DOMContentLoaded', () => { const grid = document.querySelector('.grid'); var msnry = new Masonry( grid, { // options itemSelector: '.grid-item', columnWidth: 200 }); const api = 'https://api.nasa.gov/planetary/apod?api_key=XXXXXXXXXXXXXXXXXXXXXXXXX&count=3'; const xhr = new XMLHttpRequest(); xhr.open('GET', api); xhr.onreadystatechange = function() { if (xhr.status == 200 && xhr.readyState == 4) { var response = JSON.parse(xhr.responseText); response.forEach(object => { let div = document.createElement('div'); div.classList.add('grid-item'); grid.appendChild(div); let img = object.hdurl; grid.lastChild.innerHTML = '<img src="' + img + '" alt="NASA Picture of the Day" >'; }); } }; xhr.send(); });Resultados (Ampliados al 50%):
·
Juan Pablo Isaza
Responde la pregunta