0

我正在拔头发,试图解决一个简单的问题。我知道这里缺少一些数学步骤,我觉得我正处于解决方案的边缘,但我无法到达那里。

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

所以到目前为止我在第一行上工作,但在那之后失败了,因为它不断调整不必要的大小。

$(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);





});

请参阅此处的工作示例-

http://jsbin.com/ovewib/7/edit

任何帮助将不胜感激!

4

1 回答 1

2

这是问题所在:

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

当有不止一排时,这是错误的。试试这个:

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

http://jsfiddle.net/mblase75/zXeHG/

于 2013-03-12T16:19:04.490 回答