算法：如何划分网格列宽（如 google-chrome）

Question

我正在使用 JavaScript 构建一个流体 (html) 网格。我喜欢使用装箱算法来订购网格项目。网格应按百分比或网格中给定的列数划分列。

我一直在寻找或创建一个可以“平等地”潜入列的算法（如下例所示）。由于很多浏览器都处理这种不同的（亚像素渲染），我喜欢通过 JavaScript 设置列宽。我喜欢 Google Chrome (38.0.2125.104) 划分像素的方式。并希望有人可以帮助或告诉我这是如何完成的。 Chrome 如何做到这一点的一个例子：

宽度：100 像素 - 3 列 (33.333333333%)
33像素 | 34像素 | 33 像素 |

宽度：100 像素 - 8 列 (12.5%)
13像素 | 12像素 | 13像素 | 12像素 | 13像素 | 12像素 | 13像素 | 12像素

宽度：99 像素 - 4 列 (25%)
25像素 | 25像素 | 24像素 | 25像素

宽度：99 像素 - 8 列 (12.5%)
12像素 | 13像素 | 12像素 | 13像素 | 12像素 | 12像素 | 13像素 | 12像素

我已经找到了剩余部分，但我什至不知道这是否是要走的路。我做了一些测试试图重新创建上述内容，但毫无希望地失败了。

<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），以及获取 offsetWidth 的代码或类似的实现。

Answer 1

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;     
   }
  }
 }
}