如何在JavaScript中實現TileWindows算法？

我需要用div平均填充一些正方形。允許調整div的寬度和高度。我知道WINAPI有一個名爲TileWindows的函數（這裏描述的是https://msdn.microsoft.com/en-us/library/windows/desktop/ms633554(v=vs.85).aspx），但我需要在JavaScript中實現相同的行爲。那麼，如何做到這一點？如何在JavaScript中實現TileWindows算法？

來源

2015-03-03 splash27

我不明白這是如何tileWindows功能工作。你能提供更多的信息嗎？你有沒有嘗試過任何東西？ – 2015-03-03 12:35:34

@Jonas Grumann，它用窗戶填滿廣場。它可能會得到一個決定優先級的參數：水平或垂直。如果水平，那麼函數將試圖用寬度比高度滯後的窗口填充正方形，反之亦然。 – splash27 2015-03-03 12:48:20

我自己發明。

通告：

1）clientRect是正方形對象，通過Element.getBoundingClientRect()返回。

2）dialogs是我們需要放置在廣場內的一組對象。（在我的情況下只是對話窗口）。我喜歡實現機頂盒，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; 
     } 
    };

來源

2015-03-07 08:03:39 splash27

如何在JavaScript中實現TileWindows算法？

回答

相關問題