适合任何宽度/高度容器的正方形网格

Question

I am trying to create a grid of squares that could fit in any dimensions container (ie. the squares resize themselves or add/delete new ones if the container width/height are changed).

I am going the Javascript route for now (and Jquery, for now) - there might be a flexgrid solution but since I plan to populate my squares with some kind of cellular automata type thingie, I figured that it wouldn't hurt. This doesn't solve my problem, since the number of lines of squares seems to be fixed.

Here is what I have so far:

var screen = {
  width: 0, // these I get with jquery, on load and on resize events
  height: 0
}

var values = {
  min: 100, // minimum square size
  max: 500 // maximum square size
}

var findSize = function() {
  var r = 1; 
  var currVal = values.min;
  while (r > 0) {
    if((screen.width % currVal) === (screen.height % currVal)) {
      // this should mean that they are both divisible by this value, right?
      // get out of the loop and return value
      r = 0;
      return currVal;
    } else if (currVal > values.max ) {
      // if we exceed the maximum size, get out of the loop and return 0
      r = 0;
      return 0;
    } else {
      // if not, increment a bit
      currVal += 0.25; // increment the value to check the modulo against
    }
  }
}

Calling the findSize() function should return either the dimensions of the square (from which I can then build my grid easily, with either float ed squares or absolutely positioned ones.

The problem is that it doesn't. Well it sometimes does. And it also pretty often gives me nothing...

The border are done with box-shadow so it shouldn't affect the dimensions.

So I am wondering...

• Where is my code faulty?
• Can I change my function so it return always something (maybe with smaller incrementations?). I can work with rounded values for display purpose.
  • The brute force aspect doesn't seem too efficient. Is there a way to refactor this so the loop is shorter?

Thanks a lot!

Answer 1

The problem with this code is it tries to find the solution but fails to account for answers between each deltas (0.25).

Also, if there can be any numbers of cells (added removed automatically) then the answer can also be "always 100".

I guess what you're trying to achieve here is a "best fit" that could leave no borders horizontally and vertically at the same time. I'm not sure if there is a proper answer to that question (you probably need to search for Greatest common divisor , close to what you are doing), and I wonder if something like the code below wouldn't work in your case:

var findSize = function() {
  var ratio = screen.width / screen.height; // get the ratio between width and height
  if (ratio > 1) {
    ratio = 1 / ratio; // always have it always <= 1
  }
  var size = values.max * ratio; // size between 0 and max
  if (size < values.min) {
    return values.min; // failed, could try other things here
  }
  return size; // size between min and max
}