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

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

使用方法

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サンプルページ一覧

skuare.net