砌体画廊与网格布局

时间:2017-08-21 17:18:45

标签: javascript css css3 grid-layout css-grid

我一直在寻找一个有网格布局的砌体画廊,我没有找到它所以我决定自己做。我使用带有网格布局的customElement,但是当我动态分配网格行时,我被阻止了 我希望得到您的反馈并帮助改进它。

我检测到的一些错误是:

  • 需要运行2次才能工作
  • 图像/容器高度不是100的倍数时的空格

HTML

<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/

1 个答案:

答案 0 :(得分:1)

你的错误&#34;有以下原因:

  1. 您尝试在图像附加到组件后立即计算图像的高度,但此时它的高度未知,只有在图像加载后才会知道。
  2. 网格行之间有1个(16px)间隙,因此每个100px高的图像会将网格高度增加116px。
  3. 可以修复此行为,例如,通过以下append方法的修改:

    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)
    
        })
    
      }
    

    并将gridRows替换为gridAutoRows = '100px'以使垂直节奏均匀,并相应地调整图像的高度。

    您可以看到结果in the edited Fiddle