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

Question

我正在使用JavaScript构建一个流体（html）网格。我喜欢使用bin-packing算法来排序网格项。网格应将列除以百分比或网格中给定的列数。

宽度:100px-3列(33.3333333333%)
33px34px33px

宽度:100px-8列(12.5%)
13px12px13px12px13px12px12px12px

宽度:99px-4列(25%)
25px25px24px25px

<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

Answer 1

JSFiddle演示宽度:100px-3列(33.33333333333%)
JSFiddle演示宽度:99px-4列（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;     
   }
  }
 }
}