ウィンドウサイズに合わせて要素をきれいに配置するJavaScript「Browser size aware content scaling」

Googleの画像検索はウィンドウサイズによって表示件数を変えているのをご存知でしょうか?
割り切れない個数の場合、余らせるのではなくあえて隠してしまうそのこだわり、あなたも追求しませんか。
jQueryを使用して同じ方法を実現する「Browser size aware content scaling like Google images」です。
ウィンドウサイズに合わせて要素をきれいに配置するJavaScript「Browser size aware content scaling」サンプル

使用方法
jQueryからjquery.jsをダウンロードします。
また要素は今回画像として以下のようにマークアップされているとします。
<div id="content">
<img src="画像パス1" />
<img src="画像パス2" />
<img src="画像パス3" />
<!-- 以下画像分 -->
</div>

また、CSSは以下の通りです。
<style>
#content { border:1px solid black; }
#content img { float:left; margin:20px 40px 20px 40px; border:2px solid #333;}
</style>

次にJavaScriptを記述します。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// ウィンドウ幅が変わったらcalculateContentを行います
$(window).bind("resize", calculateContent);

// 最初にウィンドウ幅をcalculateContentを実行
calculateContent();
});

function calculateContent( e ) {
// 隠れているのを含めて、いったん全部表示
$("#content img").show();

// 要素幅は100px + 40px + 40px + 2px + 2pxで184pxとなります
var imageWidth = 184;

// #contentの幅を取得します
var contentAreaWidth = $("#content").width();

// 一列あたりの表示個数を計算
var itemsPerRow = Math.floor(contentAreaWidth / imageWidth);

// 画像の数を数えます
var totalNrOfItems = $("#content img").length;

// 行数を取得
var fullRows = Math.floor(totalNrOfItems / itemsPerRow);

// 何個の画像を隠すか計算
var itemsToHide = totalNrOfItems - fullRows * itemsPerRow;

// はみ出た画像を隠します
for(var i = totalNrOfItems; i > totalNrOfItems - itemsToHide; i--) {
var remover = i - 1;
$("#content img:eq("+remover+")").hide();
}
}
</script>

ウィンドウサイズに合わせて要素をきれいに配置するJavaScript「Browser size aware content scaling」サンプル

sponsors

「ウィンドウサイズに合わせて要素をきれいに配置するJavaScript「Browser size aware content scaling」」をシェアする

記事作成:
記事URL:

TOP > > > ウィンドウサイズに合わせて要素をきれいに配置するJavaScript「Browser size aware content scaling」

前の記事:
次の記事:LPについて考えてみた

あなたにはこちもお勧め!

jQuery プラグインまとめ!