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

Question

我正在使用JavaScript构建一个流畅的（html）网格。我喜欢使用bin-packing算法来订购网格项。网格应按行百分比或网格中给定数量的列划分列。

我无法找到或创建一个可以同时潜入列的算法。＆＃39; （如下例所示）。由于许多浏览器处理这种不同的（子像素渲染），我喜欢用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 | 25像素

宽度：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），以及get 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;     
   }
  }
 }
}