jQueryで作るAmazon流リキッドレイアウト (3/5)

• 
• ツイートする

コンテンツの幅に合わせる処理を用意する

　それでは、コンテンツの幅に合わせて、表示件数を変えるスクリプトを作成しましょう。

　最初にHTMLタグを設定します。まず、ページ全体の中でのレイアウトを示す<div>タグを用意し、ID名を付けます（作例では「bookmain」としました）。さらにもう1つ、<div>タグを用意し、その中に表示したい画像やテキストを囲む<div>タグを書いていきます。<div>タグには、「bookrank」という名前のスタイルシートクラス名を付け、必要な数だけ<div class="bookrank">～</div>を繰り返します。画像のサイズにもよりますが、あまり多くてもウィンドウの最大幅には限度があるので、3～6つくらいにしておくのがよいでしょう。

    <div id="bookmain">
        <div class="contents">
            <h2>当サイトで評価の高い本</h2>
            <div class="bookrank">
                <img src="images/1b.jpg" width="120" height="180" alt="本を読む本"><br>
                本を読む本<br>
                M.J.アドラー著<br>
                講談社学術文庫<br>
            </div>
            ：（必要な数だけ<div class="bookrank">～</div>を繰り返す）
        </div>
    </div>

　プログラムでは、「bookmain」の表示幅を取得し、それに合わせて、「bookrank」が指定されている<div>タグの表示個数を決めます。なお、jQueryでは画面に表示されていないコンテンツ（HTMLタグ／エレメント）の横幅は取得できないため、大前提として、幅を取得するコンテンツは画面に表示されていなければなりません。

　表示件数は、コンテンツ（bookmain）の横幅と、横に並べる中身（「bookrank」クラスを指定した<div>タグ）で割り算します。小数点以下を切り捨てた数が、表示する件数になります。今回は小数点以下を切り捨てるために parseInt() を使っていますが、Math.floor() でも結果は同じです。

var w = $j("#bookmain").width();    // 表示領域の横幅を取得
var eleW = $j(".bookrank:first").width(); // 1つの本の紹介の横幅
var d = parseInt(w / eleW);

　「bookrank」の表示・非表示の切り換えは、単純に表示するだけなら show() 、非表示なら hide() でできますが、今回は show() の代わりに fadeIn()、 hide() の代わりに fadeOut() を使います。すると、ウィンドウをリサイズしてコンテンツ幅が変化するのに合わせて、画像やテキストがフェードイン／フェードアウトしてカッコよく見せることができます。

　以下が、ここまで説明したスクリプト部分のソースコードです。

    function setBookRank(){
        var w = $j("#bookmain").width();    // 表示領域の横幅を取得
        var eleW = $j(".bookrank:first").width(); // 1つの本の紹介の横幅
        var d = parseInt(w / eleW);
        for(var i=0; i<$j(".bookrank").length; i++){
            $j(".bookrank").eq(i).css({
                "position":"absolute",
                "top":"50px",  // 表示位置の調整はここで
                "left": i * eleW
            });
        }
        for(var i=0; i<d; i++){
            $j(".bookrank").eq(i).fadeIn();
        }
        for(var i=d; i<$j(".bookrank").length; i++){
            $j(".bookrank").eq(i).fadeOut();
        }
    }

var w = $j("#bookmain").width();	// 表示領域の横幅を取得

var w = $j(".contents").eq(0).width();	// 表示領域の横幅を取得