javascript - 算法:如何划分网格列宽(如google-chrome)

我正在使用javascript构建一个fluid（html）网格。我喜欢使用装箱算法来订购网格项目。网格应按百分比或网格中给定的列数划分列。
我一直在寻找或创建一个算法，它可以“平均”划分列（如下面的例子）。由于许多浏览器处理这种不同的（亚像素渲染），我喜欢用JavaScript设置列宽我喜欢google chrome（38.0.2125.104）划分像素的方式。希望有人能帮助我或者告诉我这是怎么做到的Chrome如何做到这一点的示例：
宽度：100px-3列（33.333333333%）
33px 34px 33px|
宽度：100px-8列（12.5%）
13px | 12px | 13px | 12px | 13px | 12px | 13px | 12px
宽度：99px-4列（25%）
25px 25px 24px 25px
宽度：99px-8列（12.5%）
12px 13px 12px 13px 12px 12px 13px 12px
我已经找到了剩下的，但我甚至不知道这是不是一条路。我做了一些试验，试图重现上述情况，但毫无希望地失败了。

<div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

var x = 3; //divisor (3 columns)
var y = 100; //number (100 px)
var rem = y % x; //remainder (modulo (or bitwise))

console.log(rem); //output: 1

一个简单的jsfiddle:http://jsfiddle.net/dgvc268n/。以确定我的问题是清楚的。我主要寻找算法方面的帮助（像chrome那样重新创建项的划分（width））以及get offsetwidth或类似实现的代码。

最佳答案

jsFiddle Demo width : 100px - 3 columns (33.333333333%)
jsFiddle Demo width : 99px - 4 columns (25%)
一种方法是采用一个列数组和一个父网格，然后遍历每一列和每一列中的每一项，根据父网格的宽度和每一列的剩余部分更改宽度。

function fluid(grid,columns){
 var colCount = columns.length;
 var gridWidth = grid.clientWidth;
 var colWidth = gridWidth / colCount;
 if( parseInt(colWidth,10) === colWidth ){
  for(var i = 0; i < colCount; i++){
   var col = columns[i];
   for(var n = 0; n < col.length; n++){
    col[n].style.width = colWidth + "px";
   }
  }
 }else{
  var remainder = gridWidth - parseInt(colWidth,10) * colCount;
  var added = 0;
  for(var i = 0; i < colCount; i++){
   var calcWidth;
   if( i > 0 && added < remainder ){
    added++;
    calcWidth = parseInt(colWidth,10)+1 + "px";
   }else{
    calcWidth = parseInt(colWidth,10) + "px";
   }
   var col = columns[i];
   for(var n = 0; n < col.length; n++){
    col[n].style.width = calcWidth;
   }
  }
 }
}