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

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

How to create a fluid grid with jQuery
demo

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

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

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

スクリプトのオフ時

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

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

Post on:2010年1月12日