Grid布局20行代碼快速生成瀑布流

網格布局

Grid 布局，好用又簡單，至少比 Flex 要人性化一點，美中不足就是瀏覽器支持度差點。

---

DOM結構

中間夾層為了后續拓展。

---

CSS

.grid {
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 10px;
    grid-column-gap: 4px;
    height: e('calc(100% - 32px)');
    overflow-y: scroll;
}

.img-container {
    .img {
        width: 100%;
        height: auto;
    }
}

.grid 的意思是網格布局，2 列平分寬度，單行為 10px，自動拓展行數，列間距 4px，超出高度滾動。

這里 10px 是顆粒度，顆粒度越小，效果越好。注意，顆粒度與行間距有關，顆粒度小，行間距最好為 0，顆粒度大可以有適量的行間距，但是建議依然是 0。

圖片設置 width 為 100%，是表明為等寬瀑布。

---

JavaScript

return m('.img-container', { : this.clickImg, style: `grid-row: auto / span ${this.rows}` }, [
      m("img.img[alt='img']", {
        src: url,
        : e => {
          const rows = ~~(e.target.height / 10) + 1
          this.rows = rows
        }
      })
    ])

這是 Mithril.js 的代碼，知道我的都清楚我最近用這個。

代碼意思就是給夾層根據圖片高度設置所在網格行，auto 是自動放置在某行，span X 是跨越多少行，這里跨越多少取決於圖片高與顆粒度的商，商 + 1 是為了留白。

這里的 10 對應的是 CSS 里面的 10px，注意下。

---

效果

---

小結

1. HTML 兩層或三層，具體看自己需求，建議 3 層用於拓展。
2. CSS Grid 布局，設置行為自動，顆粒度盡量小，不要行間距。
3. JavaScript 通過圖片縮放后的高度來設置跨越的行數。
4. 缺點，圖片排序會有偏差。