2013-05-07

javascript:ウィンドウのサイズに応じてtableの行数を変更する

ウィンドウをリサイズしたときに、tableの行数を自動的に変更して表示するjavascript

リサイズの検出は下記
window.onresize = function(){

     ShowList();

}


ウィンドウの幅に応じてtableの行数を変更するのは下記
function ShowList() {

 col_num = Math.floor($(document).width()/450);
 if (col_num < 1 ) col_num = 1;

 var html = '<table border="2" cellpadding="5">';

 var td_num = 0;
    for( var i=0; i<photoset_id.length; i++ ) {

  if (td_num % col_num == 0) {
   html += '<tr>';
  }

   html += '<td class="td_img"><a href="******">'
   if (thum) {
    html += '<img src="****">'
   }
   html += '</a></td>';

   html += '<td class="td_txt"><a href="*****">*****</a>';

   html += '<br/>'

   if (td_num % col_num == col_num-1) {
    html += '</tr>';
   }

   td_num++;

  }

  if (td_num % col_num == col_num-1) {
   html += '<td class="td_img"><br/></td>';
   html += '<td class="td_txt"><br/></td>';
   html += '</tr>';
  }

 html += '</table>';
 document.getElementById("list").innerHTML = html;

}



参考にしたページ

切り捨て
テーブルの幅をブラウザの幅(内側)に合わせる
jQuery - width()


以上