タイル配置

最初にタイル配置の設定変数を定義しておきます。
本デモでは３列にするために、１列の横幅比率は33.333%、余白は10pxとします。

タイル配置を行う要素を特定し、横並びのためのスタイルを付与します。

子要素を変数に格納します。
childrenで取得した値はそのままでは反復処理ができないため、Array.from()で配列に変換します。
反復処理を行い、全ての子要素に基本のスタイルを付与していきます。
子要素の表示に影響を与えないよう、div要素で囲んでからスタイルを付与しています。
内容は最初に定義した設定変数による横幅指定・余白指定です。

子要素の配列を行毎に分割していきます。
本デモでは３列になるため、子要素の配列を３つずつ切り出していき、切り出し終えたところでループを終えるようにしています。

行毎に反復処理を行なっていきます。
１行目はそのまま表示すればよいため、早期に処理を終了します。

１つ前の行の要素配列に対して反復処理を行い、それぞれの終了位置をgetBoundingClientRect().bottomで取得します。
さらにその中で一番下になっている要素の位置を取得します。
Math.maxは引数に配列は受け取れないため、applyというメソッドを通して配列を渡せるようにしています。
現在の行の要素配列に対して反復処理を行い、隙間がある（= prevEndPositions[index] - prevMaxEndPosition）場合には上に詰めるようにします。

最終行まで処理したら、タイル配置全体の高さを設定します。
これは「最終行の要素の中で一番下になっている要素の位置」から「タイル配置要素の開始位置」を引くことで求めることができます。