沒穿方服

註 1：這篇談的是 2020 前的 CSS 解法 (flexbox)，且使用 react-masonry-css 這個老套件，並非新的 JS 解或還未定案的 CSS 標準（參考），目前（2024）看來，舊方法還是有適用的地方。

註 2：能調整的前提是每個元素的高度已知。

以 CSS 為主的解法，看中的是單純性和效能，避免頻繁計算每個元素的實際尺寸，而缺點如下：

• 排序問題，因為以多個 column「直行」為容器，所以元素其實是由上排到下，而不是由左到右。
  這點在 react-masonry-css 是用 JS 硬把元素分配給各個 column 解決。
• 高度不均。因為根本沒有考慮元素的高度，當然避免不了有的 column 特別長或短的問題。
  具體可以看 issue #73 中的附圖：very different columns height - paulcollett/react-masonry-css。

針對高度不均，造成底部有很大落差不齊的情況，折衷辦法是預先給予每個元素「高度」的參考，類似給每個 <img> 賦予已知的 height 值；然後再用 JS 計算累積高度，最後搬動特別突出的元素，直到無法再用搬動方式改善為止。

實作也很單純，主要價值還是知道多做這一小步，就能得到不少改善。

程式碼參考我的 fork： bootleq/react-masonry-css at forker，具體在 balanceColumns 和 moveOddItem 兩個函數：
react-masonry-css/src/react-masonry-css.js at 4866d3596#L72