[JS]ブラウザのサイズに合わせてコンテンツの量を自動調整して配置するスクリプト -Content Scaling

Google画像検索のように、ブラウザの表示サイズに合わせてコンテンツの量を自動調整して配置するスクリプトをMarcofolio.netから紹介します。

デモのキャプチャ

Browser size aware content scaling
demo

上のキャプチャよりブラウザのサイズを小さくすると、下記のように一行の量が自動で変化して配置されます。

デモのキャプチャ

ブラウザのサイズを小さくした場合

スクリプトでは最後の行に端数が生じぴったりに収まらない場合は、その行自体を表示せずにぴったりと収まるようにします。

デモのキャプチャ

Content ScalingはjQueryのプラグインのため、実装にはjquery.jsが必要です。

sponsors

top of page

©2018 coliss