空のスペースをフローティングブロックで埋めます。 2つの実装例の分析。 YandexおよびLebedev Studioから。

最近、あるオンラインストアでフローティングブロックを販売する問題に遭遇しました。 一番下の行は、商品がブロックで表示されることです。 計画どおり、水平ブロックの数は画面の解像度によって異なります。 ブロックの高さが固定されていないため、フロートバカを使用することはできませんでした。

少しグーグルで、何も見つかりませんでした。 しかし、彼はYandexとLebedevのスタジオの店で同じようなものを見たことを思い出しました。

実際、私はあなたがあなた自身が示されたソースで見つけることができるものをレビューのためにここに投稿しています。 私がしたことはすべて、不必要なコードを取り除くことでした。 前に同様の投稿を見つけた場合、時間を節約できます。





これらの方法には、それぞれ長所と短所があります。 見てみましょう：



Yandexとソース からの例

+ブロックの高さ制限なし

+すべての空のスペースを埋めます

-かなり大きなjavascriptを使用します

-使用済みテーブル



Lebedevのスタジオとソース からの例 （左のコメントをありがとう）

+ JavaScriptなし

+テーブルなし

-新しいブロックに十分ではない場合、空のスペースを埋めません

-厳密なブロックの高さ制限



他の興味深い例を知っているなら、書いてください。 コレクションを補充します。