算法：如何劃分網格列寬（如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;  
    } 
    } 
} 
}