I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > jQuery > 複数のカラムの高さを最大値に揃えてくれるjQueryプラグイン「jQueryAutoHeight.js」

複数のカラムの高さを最大値に揃えてくれるjQueryプラグイン「jQueryAutoHeight.js」

ホームページでグリッドデザインなどにする時、複数のカラムの高さを自動的に揃えるには、jQueryAutoHeit.jsを紹介します。

jqueryautoheight.png

jQueryAutoHeit.jsとは

jQueryAutoHeight.js とは、複数のボックスの高さを自動的にそろえるシンプルな jQueryプラグインです。

「セレクタで指定したすべての要素を、その中の最大値にそろえる」か、「セレクタで指定した要素を、オプションで渡した数ごとに、その中の最大値にそろえる(1行ごとにそろえられる)」ことができます。

DEMO

ダウンロード

スクリプトは下記URLからダウンロードしてください。

かたつむりくんのWWW|jQueryAutoHeight.js - 複数のカラムの高さを最大値にそろえるjQueryプラグイン
https://github.com/tinybeans/jQueryAutoHeight

利用方法

基本的なhtml(<head>タグ内)の記述

下記のように高さを揃えたいセレクタにautoHeightを設定します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jQueryAutoHeight.js"></script>
<script type="text/javascript">
jQuery(function($){
    $(揃えたいセレクタ).autoHeight();
});
</script>
高さを揃える要素内に画像が入っている場合のhtml(<head>タグ内)の記述

高さを揃えたい要素内に画像が入っている場合は、画像読み込み後にjQueryが実行されるようにします。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jQueryAutoHeight.js"></script>
<script type="text/javascript">
    jQuery.event.add(window,"load",function() { 
        $('揃えたいセレクタ').autoHeight();
    });
</script>

記事移動

関連記事

CSSとjQueryで作るメニュー表示時にコンテンツのスクロールをさせないドロワーメニュー

レスポンシブ対応・スワイプ可能な多機能スライドショーjQueryプラグイン「Slider Pro」

レスポンシブ対応・スワイプ可能な多機能スライドショーjQueryプラグイン「Slider Pro」

jQueryプラグイン「Infinite Scroll」と「Masonry」を利用して無限スクロールのギャラリーを作成する方法

Masonryを利用した時要素が重なるなどうまく並び変えられない場合の「imageLoaded」を利用した対処法

要素をタイル状に表示する超有名jQueryプラグイン「Masonry」の基本的な使い方

フルスクリーンで背景を表示するスライドショーにも対応可能なjQueryプラグイン「MaxImage2」

フルスクリーンで背景を表示するスライドショーにも対応可能なjQueryプラグイン「MaxImage2」

Comment Form

  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Restriction
Postkey
(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)【I'll be NET】

プロフィール

author:I'll be NET

since:2014.01.01

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。

more

Feed

Tagcloud