[JS]ブラウザのサイズに合わせてレイアウトを自動変更するチュートリアル

Post on:2010年1月12日

sponsors

グリッドベースのレイアウトをブラウザのサイズに合わせて、レイアウトを自動で変更するスクリプトを実装するチュートリアルをCreativityDenから紹介します。

デモでは下記のようにブラウザのサイズを変更すると、カラム数を変更してブラウザ内に収まるように配置します。

ブラウザのサイズを小さく変更

各カラムはdiv要素で実装されており、スクリプトのオフ時には下記のように成り行きで表示されます。

スクリプトのオフ時

スクリプトのベースにはjQueryが使用されています。

オプションでは、カラムの最低数、カラムのマージン、カラムの幅の変更が可能で、高さはデータに依存して配置されます。