Сетка квадратов, подходящая для любого контейнера ширины / высоты

Question

Я пытаюсь создать сетку квадратов, которая могла бы поместиться в любой контейнер размеров (ie. Квадраты изменяют размер сами или добавляют / удаляют новые, если ширина / высота контейнера изменяются).

Сейчас я иду по маршруту Javascript (и Jquery, пока) - может быть решение с гибкой сеткой, но поскольку я планирую заполнить свои квадраты какой-то штукой типа клеточного автомата ie, Подумал, что не повредит. Этот не решает мою проблему, так как количество строк квадратов кажется фиксированным.

Вот что у меня есть:

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
    }
  }
}

Вызов функция findSize() должна возвращать либо размеры квадрата (из которого я затем могу легко построить свою сетку, используя либо float ed квадраты, либо абсолютно позиционированные.

Проблема в том, что это не так. Ну, иногда бывает. И это также довольно часто мне ничего не дает ...

Граница сделана с помощью box-shadow поэтому он не должен влиять на размеры.

Так что мне интересно ...

• Где мой код неисправен?
• Могу ли я изменить свою функцию, чтобы он return всегда что-то (может быть, с меньшими приращениями?). Я могу работать с округленными значениями для отображения.
  • Аспект грубой силы не кажется слишком эффективным. Есть ли способ провести рефакторинг это значит, что l oop короче?

Большое спасибо! * 10 41 *

Answer 1

Проблема с этим кодом в том, что он пытается найти решение, но не учитывает ответы между каждой дельтой (0,25).

Кроме того, если может быть любое количество ячеек (добавляется и удаляется автоматически), тогда ответ также может быть «всегда 100».

Я предполагаю, что вы пытаетесь достичь здесь «наилучшего соответствия», которое не может оставлять границ по горизонтали и вертикали одновременно. Я не уверен, есть ли правильный ответ на этот вопрос (вам, вероятно, нужно искать Greatest common divisor, близкий к тому, что вы делаете), и мне интересно, не сработает ли что-то вроде приведенного ниже кода в вашем случае:

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
}