Mauerwerk Galerie mit Raster Layout

Question

Ich habe eine Weile eine Mauerwerk Galerie mit Raster-Layout gesucht, ich habe es nicht gefunden, also habe ich beschlossen, es für mich selbst zu tun. Ich benutze ein customElement mit Rasterlayout, aber ich werde blockiert, wenn ich die Rasterzeilen dynamisch zuweise.
Ich möchte Ihr Feedback und helfen, es zu verbessern.

Einige Fehler, die ich entdeckt habe, sind:

• Need 2 mal zu Werke
• Leerzeichen laufen, wenn Bild/Behälterhöhe nicht mehrere von 100

HTML ist

<masonry-gallery></masonry-gallery> 

JS

class MasonryGallery extends HTMLElement { 

    items = [ 
    { image:'https://unsplash.it/200/100/' }, 
    { image:'https://unsplash.it/200/200/' }, 
    { image:'https://unsplash.it/200/300/' }, 
    { image:'https://unsplash.it/200/400/' }, 
    { image:'https://unsplash.it/200/300/' }, 
    { image:'https://unsplash.it/200/200/' }, 
    { image:'https://unsplash.it/200/100/' }, 
    { image:'https://unsplash.it/200/300/' }, 
    { image:'https://unsplash.it/200/700/' }, 
    { image:'https://unsplash.it/200/300/' }, 
    { image:'https://unsplash.it/200/200/' }, 
    { image:'https://unsplash.it/200/600/' }, 
    { image:'https://unsplash.it/200/100/' } 
    ] 

    constructor() { 
    super() 
    this.attachShadow({ mode: 'open'}) 
    this.create() 
    this.append() 
    } 

    create() { 
    this.style.display = 'grid' 
    this.style.gridTemplateColumns = 'repeat(auto-fill, 200px)' 
    this.style.gridTemplateRows = 'repeat(auto-fill, 1fr)' 
    this.style.gridGap = '1rem' 
    this.style.gridAutoFlow = 'row dense' 
    } 

    append() { 

    this.items.map(item => { 

     const div = document.createElement('DIV'); 
     const image = document.createElement('IMG') 

     image.src = item.image 
     div.appendChild(image) 

     this.shadowRoot.appendChild(div) 

     div.style.gridRow = 'auto/span ' + [...String(image.height)][0] 
    }) 

    } 

} 

customElements.define('masonry-gallery', MasonryGallery) 

FIDDLE https://jsfiddle.net/znhybgb6/6/

Answer 1

Ihr „Fehler“ haben folgende Gründe:

1. Sie versuchen, die Höhe des Bildes zu berechnen nur, nachdem es mit dem Bauteil verbunden ist, aber seine Höhe ist unbekannt An diesem Punkt wird es erst bekannt, nachdem das Bild geladen wurde.
2. Sie haben 1rem (16px) Lücken zwischen den Rasterzeilen, also fügt jedes 100px-hohe Bild 116px zur Rasterhöhe hinzu.

Dieses Verhalten kann durch die folgende Bearbeitung Ihrer append Verfahren festgelegt werden, zB:

append() { 

    let gap = parseInt(getComputedStyle(this).gridRowGap) 

    this.items.map(item => { 

     const div = document.createElement('DIV'); 
     const image = document.createElement('IMG') 
     image.style.display = 'block'; 

     image.src = item.image 
     div.appendChild(image) 
     image.onload = function() { 
      this.parentNode.style.gridRow = 'auto/span ' + ((this.height + gap)/(100 + gap)); 
     } 

     this.shadowRoot.appendChild(div) 

    }) 

    } 

und gridRows mit gridAutoRows = '100px' zur Herstellung der vertikalen Rhythmus Uniform ersetzt, und die Höhen der Bilder entsprechend anpassen .

Sie können das Ergebnis in the edited Fiddle sehen.