Показать сообщение отдельно
  #1 (permalink)  
Старый 16.09.2012, 15:28
Профессор
Отправить личное сообщение для PashPP Посмотреть профиль Найти все сообщения от PashPP
 
Регистрация: 26.07.2012
Сообщений: 281

Задачка. Расчитать количество столбцов/колонок
Есть блок, размер которого будет меняться, надо написать формулу, по которой будут вмещаться в него элементы так, чтоб их соотношение сторон было равно до максимально возможного.
Если по простому, то надо аккуратно вставить заданное кол.прямоугольничков в блок.

Вот уже третий вариант написал, но все не то...
<style>
  #keyboard {
    height: 300px;
    width: 400px;
    padding: 0;
    border: 1px solid black;
    clear: both;
    overflow: hidden;
  }

  .key {
    float: left;
    border: 1px solid green;
  }
  </style>

<div id='keyboard'></div>

<script type='text/javascript'>
function Keypad(KeypadDiv) {
  var keypad = document.getElementById(KeypadDiv);
  var keys = '';

  var keypadWidth = parseInt(getComputedStyle(keypad, '').width, 10);
  var keypadHeight = parseInt(getComputedStyle(keypad, '').height, 10);

  var heightPercent = keypadHeight/(keypadWidth+keypadHeight)

  var keyHeight = 100/Math.floor(Math.pow(32, heightPercent));

  var keyWidth = 100/Math.ceil(Math.pow(32, (1-heightPercent)))


  for(var e=0; e<32; e++) {
    keys += '<div class=\"key\" style=\"width:'+ keyWidth+ '%; height:'+ keyHeight +'%; -moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box;\" >' + String.fromCharCode(1072 + e) + '</div>';
  }
  keypad.innerHTML = keys;
}

var f = new Keypad('keyboard')
</script>
Ответить с цитированием