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

Question

我正在使用JavaScript构建流体（html）网格。我喜欢使用装箱算法来订购网格物品。网格应该按百分比或网格中给定数量的列来划分列。

我很难找到或创建一个算法，可以将列'等分'（如下面的例子）。由于许多浏览器处理这种不同的（子像素渲染），我喜欢用JavaScript设置列宽。我喜欢Google Chrome（38.0.2125.104）划分像素的方式。并希望有人能够帮助或告诉我如何做到这一点。 Chrome如何做到这一点的一个例子：

width：100px - 3 columns（33.333333333％）
33px | 34px | 33px |

width：100px - 8 columns（12.5％）
13px | 12px | 13px | 12px | 13px | 12px | 13px | 12px

width：99px - 4 columns（25％）
25px | 25px | 24px | 25px

width：99px - 8 columns（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这样的项目（宽度）的划分），以及获得偏移量的代码或者像这样的实现。

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