Как реализовать алгоритм TileWindows в javascript?

Question

Мне нужно заполнить квадрат равномерно div. Разрешено регулировать ширину и высоту div. Я знаю, что WINAPI имеет функцию под названием TileWindows (описано здесь https://msdn.microsoft.com/en-us/library/windows/desktop/ms633554(v=vs.85).aspx), но мне нужно реализовать то же поведение в JavaScript. Итак, как это сделать?

Answer 1

Изобретено мной.

Примечания:

1) clientRect представляет собой квадрат объект, возвращенный Element.getBoundingClientRect().

2) dialogs - это массив объектов, который нам нужно разместить внутри площади. (были только окна диалога в моем случае). Я реализовал такие методы, как SetTop, setWidth, setLeft, setHeight, но вы можете использовать только element.style.top = top + 'px'; и т.д.

function tileHorizontalDialogs(clientRect, dialogs) { 
     var dialogsCount = dialogs.length; 
     var top = clientRect.top; 
     var left = clientRect.left; 
     var XC = Math.floor(Math.sqrt(dialogsCount)); 
     var YC = Math.floor(dialogsCount/XC); 
     var w = clientRect.width/XC; 
     var h0 = clientRect.height/YC; 
     var h1 = clientRect.height/(YC + 1); 
     var modulo = dialogsCount % XC; 
     var firstExtendedColumnNumber = XC - modulo + 1; 
     var d = 0; 
     for (var hIterator = 1; hIterator <= XC; hIterator++) { 
      var h = 0; 
      var vLimit = 0; 
      if (hIterator < firstExtendedColumnNumber) { 
       vLimit = YC; 
       h = h0; 
      } 
      else if (hIterator >= firstExtendedColumnNumber) { 
       vLimit = YC + 1; 
       h = h1; 
      } 
      for (var vIterator = 1; vIterator <= vLimit; vIterator++) { 
       dialogs[d].setTop(top); 
       dialogs[d].setLeft(left); 
       dialogs[d].setWidth(w); 
       dialogs[d].setHeight(h); 
       top += h; 
       d++; 
      } 
      top = clientRect.top; 
      left += w; 
     } 
    }; 
function tileVerticalDialogs(clientRect, dialogs) { 
     var dialogsCount = dialogs.length; 
     var top = clientRect.top; 
     var left = clientRect.left; 
     var YC = Math.floor(Math.sqrt(dialogsCount)); 
     var XC = Math.floor(dialogsCount/YC); 
     var h = clientRect.height/YC; 
     var w0 = clientRect.width/XC; 
     var w1 = clientRect.width/(XC + 1); 
     var modulo = dialogsCount % YC; 
     var firstExtendedRowNumber = YC - modulo + 1; 
     var d = 0; 
     for (var vIterator = 1; vIterator <= YC; vIterator++) { 
      var w = 0; 
      var hLimit = 0; 
      if (vIterator < firstExtendedRowNumber) { 
       hLimit = XC; 
       w = w0; 
      } 
      else if (vIterator >= firstExtendedRowNumber) { 
       hLimit = XC + 1; 
       w = w1; 
      } 
      for (var hIterator = 1; hIterator <= hLimit; hIterator++) { 
       dialogs[d].setTop(top); 
       dialogs[d].setLeft(left); 
       dialogs[d].setWidth(w); 
       dialogs[d].setHeight(h); 
       left += w; 
       d++; 
      } 
      left = clientRect.left; 
      top += h; 
     } 
    };