[JS]カラムの高さを揃える多機能なスクリプト -Equal Column Heights

カラムの高さを単に揃えるだけでなく、アニメーションで揃えたり、指定した値に揃えることができるスクリプトを紹介します。

デモのキャプチャ

スクリプトの実行前

高さの異なるカラムを一番高いものと同じにします。

デモのキャプチャ

jQuery Equal Column Heights
デモ

デモではバリエーションが二つ用意されています。

デモのキャプチャ

カラムの高さをアニメーションで揃えるデモ

また、カラム内の要素に関わらず、指定した値に揃えることもできます。

デモのキャプチャ

カラムの高さを指定値に揃えるデモ

スクリプトのオプションでは、カラムの高さ(height, minHeight, maxHeight)、アニメーションのスピード、適用する子供ノードを指定することができます。

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

sponsors

top of page

©2024 coliss