google画像検索の結果画面について教えて下さい。

初めまして。
現在google画像検索の結果画面に近い物を作りたいと思っています。

言葉で説明すると長くなってしまいがちなので画像で説明しますと、
自分なりにgoogle画像検索の結果ページのコードを見た限りでは次のことが分かりました。
①１つの画像を格納するdiv要素は大きさがバラバラである
②数枚(3〜5)の画像で１行を構成しており、その行を繰り返している。根拠はdivにdata-row="1"などの独自データ属性が付いている。
③各行の高さはバラバラであり、１行の高さの最大値は〈ある画像〉を元に決定されている。(画像の①、④など)
④並べる画像は全てサムネイルであり、〈ある画像〉とはオリジナル画像とサムネイルのアスペクト比が変わらない画像である。
⑤１画像のpadding-top, padding-bottomはscriptで可変する。

以上ですが、最も不思議なのは④のところです。
〈ある画像〉の高さを基準にしてその他の画像に縦余白もしくは横余白をつけているようです。
〈ある画像〉とはオリジナル画像とサムネイルのアスペクト比が変わらない画像です。
つまり、オリジナルのサイズが500px × 500pxだとしたら、サムネイルは150px x 150pxなどになります。

吐き出されたコードを見て分かることはこれくらいで、細かいサイズ決定のアルゴリズム、どのようなcss調整がされてるのか全く分かりません。

このページの基本的な考え方とcss調整について教えて下さい。
よろしくお願いします。