Javascript 收缩箱

我正在努力解决一个简单的问题。我知道这里有一些数学步骤我错过了，我觉得我就在解决方案的边缘，但我就是不能做到这一点

我想做的是写一个算法，用正方形填充一个元素，一旦元素被填充，调整正方形的大小，创建一个新行并继续填充。填充两个新行后，追加另一行。基本上是一种换行式算法

因此，到目前为止，我所做的工作在第一行起作用，但在那之后就失败了，因为它不断地调整不必要的大小

$(function(){ //DOM Ready

  //get columns of even squares
  var columns = parseInt($(".grid").width()/$(".grid").height());
  var rows = 1;  


  function checkSize(ico,index){

   var grid,gridWidth,gridHeight
   var icon,iconWidth,iconHeight

   //get our grid info
     grid  = $(".grid");
     gridWidth = grid.width();
     gridHeight= grid.height();

   //get our icon info
     icon = $(ico);
     iconWidth = icon.outerWidth();
     iconHeight = icon.outerHeight();





    //will go over columns?
    if(index >= columns){

     //do we need another row?
      if(Math.floor(gridHeight/iconHeight) === rows){

          //add row
          rows++;

         //reset columns
        columns = gridWidth / Math.floor(gridHeight / rows);  

         //resize boxes
         size();


          };





    }


   };

  function size(){

    var grid,icon,newHeight;

    grid = $(".grid");
    newHeight = (grid.height()/rows)

    $.each(grid.children(".icon"),function(index,value){

      icon = $(value);
      icon.css("height",newHeight+'px');
      icon.css("width",newHeight+'px');
     });


  }



  //fill
  var counter = 0;
  function fillGrid(){

   var icon,grid,r,g,b,a

   icon = $('<div class="icon"></div>');

   //random color 
   r = Math.floor(Math.random()*256);
   g = Math.floor(Math.random()*256);
   b = Math.floor(Math.random()*256);
   a = 1;
   icon.css('background-color','rgba('+r+','+g+','+b+','+a+')')


   grid = $(".grid");

   grid.append(icon);
   size(icon);
   checkSize(icon,counter);
   counter++; 

  };

  var timeoutID;
  function start(){
    if(timeoutID){
      clearInterval(timeoutID);
      timeoutID = undefined;
    }else{
       timeoutID = window.setInterval(fillGrid, 1000);
    }



    };

   //START THE TIMER
  $('#start').on('click',start);





});

$（函数（）{//DOM就绪
//得到偶数正方形的列
var columns=parseInt（$（.grid”）.width（）/$（.grid”）.height（）；
var行=1；
函数检查大小（ico，索引）{
变量栅格、栅格宽度、栅格高度
变量图标、图标宽度、图标宽度
//获取我们的网格信息
网格=$（“.grid”）；
gridWidth=grid.width（）；
gridHeight=grid.height（）；
//获取我们的图标信息
图标=$（ico）；
iconWidth=icon.outerWidth（）；
iconHeight=icon.outerHeight（）；
//你会看专栏吗？
如果（索引>=列）{
//我们需要再坐一排吗？
if（数学楼层（网格高度/图标高度）==行）{
//添加行
行++；
//重置列
列=网格宽度/数学楼层（网格高度/行）；
//调整框大小
大小（）；
};
}
};
函数大小（）{
变量网格，图标，新高度；
网格=$（“.grid”）；
newHeight=（grid.height（）/行）
$.each（grid.children（“.icon”）、函数（索引、值）{
图标=$（值）；
css（“height”，newHeight+'px'）；
css（“宽度”，newHeight+'px'）；
});
}
//填满
var计数器=0；
函数fillGrid（）{
变量图标、网格、r、g、b、a
图标=$（''）；
//随机颜色
r=数学地板（数学随机（）*256）；
g=数学地板（数学随机（）*256）；
b=数学地板（数学随机（）*256）；
a=1；
css（'background-color'、'rgba（'+r+'、'+g+'、'+b+'、'+a+'））
网格=$（“.grid”）；
添加（图标）；
尺寸（图标）；
检查大小（图标、计数器）；
计数器++；
};
var-timeoutID；
函数start（）{
if（超时ID）{
清除间隔（超时ID）；
timeoutID=未定义；
}否则{
timeoutID=window.setInterval（fillGrid，1000）；
}
};
//启动计时器
$（'开始'）。在（'单击'，开始'）上；
});

请参见此处的工作示例-

任何帮助都将不胜感激

问题是：

 //will go over columns?
 if (index >= columns) {

如果有多行，则计数错误。请尝试以下方法：

 //will go over columns?
 if (index >= Math.floor(columns)*rows) {

---

请在问题本身中发布一些代码。@Blazemonger有警告（主要是关于分号），但没有错误。呸，Blazemonger比我快了一步。我建议的一个建议是，在评估较低的列时使用Math.floor。你永远不希望它是非整数。我知道我错过了一些简单的东西。非常感谢。