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

Question

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

我一直在寻找或创建一种可以“平均”分列的算法(如下例所示)。由于很多浏览器处理这种不同(子像素渲染)，我喜欢通过 JavaScript 设置列宽。我喜欢 Google Chrome (38.0.2125.104) 划分像素的方式。并希望有人可以帮助或告诉我这是怎么做到的。 Chrome 如何执行此操作的示例:

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

宽度:100 像素 - 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 一样重新创建项目(宽度)的划分)，以及获取 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;     
   }
  }
 }
}