可変グリッドレイアウトのスクリプト

JS

作れないだろうなと思って、やってみたんですけど、意外と出来てしまいました。

画面がロードされた時、ウィンドウのリサイズ時にボックスが整列します。

ウィンドウ幅に合わせ、カラム数が決まります。並び順は最初の列は、左から右と並びますが、２列目以降はカラムの高さが高い順（top値が小さい順）にボックスが整列します。

ですので、高さがバラバラの時でも一つのカラムだけ、無駄に高さがあるといったことを防げます。



http://yuto-m.sakura.ne.jp/admin/index.html
ちゃんとセンター揃えにすればよかった・・・
今度直します。

gifアニメ作ろうとしたんですけど、キャプチャーしてる時にブラウザのリサイズすると、録画された映像がチカチカして、見るに耐えなかったのでやめました・・・

以下コードです

HTML

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>variable_grid_layout</title>
  <link rel="stylesheet" type="text/css" href="css/common.css">
  <link href='http://fonts.googleapis.com/css?family=Arvo|Dosis:500' rel='stylesheet' type='text/css'>
</head>
<body>
  <div id="container">
    <header><p>VARIABLE GRID LAYOUT</p></header>
    <div id="variable_wrapper">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
      </ul>
    </div>
  </div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</body>
</html>

CSS

@charset "utf-8";

body,div,p,ul,li,header{
  margin: 0;
  padding: 0;
  letter-spacing: 5px;
  line-height: 1.5em;
}
ul{
  width: 100%;
  height: 100%;
  list-style: none;
}
li{
  color: white;
  text-align: center;
  font-family: 'Dosis', sans-serif;
  font-size: 100px;
  -webkit-transition: all 1s;
  transition: all 1s;
  top: 0;
  left: 0;
  background-color: #92c1d1;
  border-radius: 10px;
}
li:nth-child(odd){
  height: 200px;
}
li:nth-child(even){
  height: 320px;
}

#container{
  width: 80%;
  margin: 0 auto;
}
header{
  margin: 50px 0 30px 0;
}
header p{
  font-family: 'Arvo', serif;
  font-size: 70px;
  text-align: center;
}
#variable_wrapper{
  width: 100%;
  position: relative;
}
#variable_wrapper ul,li{
  position: absolute;
}

JavaScript
無駄なコードあると思いますが、見逃して下さい・・・

$(function(){
  setBoxWidth(150);
  VariableGrid(150,50,20,20,10);
  $(window).resize(function(){
    VariableGrid(150,50,20,20,10);
  })
})

function setBoxWidth(bW){
  var li = $('#variable_wrapper ul li');
  var liHs = new Array($(li).length);
  $(li).each(function(i){
    $(li).eq(i).css('width',bW);
  })
}

function firstTop(tMargin,column){
  var t = new Array();
  for(var i = 0; i < column; i++){
    t[i] = tMargin;
  }
  return t;
}

function VariableGrid(bW,sMargin,tMargin,lInterval, tInterval){
  var wrap = $('#variable_wrapper');
  var wrapW = $(wrap).width();
  var li = $('#variable_wrapper ul li');
  var c = Math.floor(wrapW / bW);
  var minW = Math.floor((bW * c) + (sMargin * 2) + ((c - 1) * 10));
  
  var column = (wrapW < minW)? (c-1): c;
  
  var top = firstTop(tMargin,column);
  
  var left = new Array(column);
  var columnInfo = [top,left];
  var cTop;
  var cLeft;
  
  for (var j = 0; j < column; j++){
    (j === 0)? columnInfo[1][j] = sMargin: columnInfo[1][j] = lInterval + columnInfo[1][j-1] + bW;
  }
  
  $(li).each(function(i){
    var j = i % column;
    var bH = $(li).eq(i).height();
    cTop = columnInfo[0][j];
    cLeft = columnInfo[1][j];
    var min = Math.min.apply(null,columnInfo[0]);
    
    if(i < column ){
      $(li).eq(i).css('top',cTop).css('left',cLeft);
      columnInfo[0][j] += bH + tInterval;
    }else{
      if(min === cTop){
        $(li).eq(i).css('top',cTop).css('left',cLeft);
        columnInfo[0][j] += bH + tInterval;
      }else{
        for (var k = 0; k < column; k++){
          if(min === columnInfo[0][k]){
            $(li).eq(i).css('top',columnInfo[0][k]).css('left',columnInfo[1][k]);
            columnInfo[0][k] += bH + tInterval;
            break;
          }
        }
      }
    }
  })
  var max = Math.max.apply(null,columnInfo[0]);
  $(wrap).css('height',max + 10); 
}

引数でマージンの設定とか出来るようにしてます。
気が向いたら、プラグイン化しようと思います。
とりあえず出来たので、良かったです。

対応ブラウザはモダンブラウザです。
IEは見てません。8以下はダメでしょう。
9,10は確認出来ないので・・・