Masonry Layoutを使いたい
masonry layout
pinterestみたいなレイアウトを、Masonry(石積み) Layoutと言うらしい。
デモ
こんな特性のものをmasonryと呼んでる気がします。
- サイズの違う要素を並べられる
- 表示領域のサイズが変わると並べ直す（これがおしゃれ）
二番目は副産物で、masonryのことではないかも？
使いたい
masonryが実装できて、SSR(next.js)対応で、速くて、コンポーネントライブラリを使いたい。
初めてコンポーネントを探した。 まずやりたいことがmasonryだってわかるまでが長かった。 わかってしまえば、githubで「masonry component」とおもむろに調べる。
でてきた。
Masonryにしたいところを
しかし初期表示とウィンドウサイズを変えたときの動きが結構もたつく。
この記事の筆者はIsotope · Filter & sort magical layoutsというJSライブラリで、どうして遅いか調べたそうだ。
だいたいこんなかんじ
- フレキシブルにするための機能が重い
- 様々なサイズの画像に対応している
- サイズ変更の再描画に時間がかかる
- 数百の要素のサイズを取得取得しなければいけない
- 見えていないところの画像も再描画している
ので、
- ページが大きくなるにつれて指数関数的に計算が増える。
のだそうです。
で、固定サイズの画像にだけ対応するなど機能を絞ってレイアウトエンジンを実装するくらいしか解決策がないと。
そもそも本当にMasonryにしないと行けないのかっていうのはちゃんと考えたほうが良さそうですね。
