算法:如何划分网格列宽(如谷歌chrome）

Algorithm: how to divide grid column width ( like google-chrome )

本文关键字：谷歌 chrome 网格 划分 何划分 算法      更新时间：2023-09-26

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

我一直在寻找或创建一个可以"同等"插入列的算法（如下面的例子）。由于很多浏览器处理这种不同的（亚像素渲染），我喜欢通过JavaScript设置列宽。我喜欢谷歌浏览器（38.0.2125.104）划分像素的方式。希望有人能帮助我或向我展示这是如何做到的。Chrome如何做到这一点的一个例子：

宽度：100px-3列（33.333333333%）
33px | 34px | 33px |

宽度：100px-8列（12.5%）
13px | 12px | 13px | 12 px | 13 px | 12像素| 13像素| 12像素

宽度：99px-4列（25%）
25px | 25px | 24px | 25px

宽度：99px-8列（12.5%）
12px | 13px | 12px | 13 px | 12 px | 12像素| 13像素| 12像素

我甚至找到了剩余的，但我甚至不知道这是否是一条路。我做了一些测试，试图重现上面的内容，但毫无希望地失败了。

<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一样重新创建项（宽度）的划分），以及getoffsetWidth或类似实现的代码。

jsFiddle Demo宽度：100px-3列（33.333333333%）
jsFiddle Demo宽度：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;     
   }
  }
 }
}
相关文章：