我自己发明。
通告:
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;
}
};
我不明白这是如何tileWindows功能工作。你能提供更多的信息吗?你有没有尝试过任何东西? – 2015-03-03 12:35:34
@Jonas Grumann,它用窗户填满广场。它可能会得到一个决定优先级的参数:水平或垂直。如果水平,那么函数将试图用宽度比高度滞后的窗口填充正方形,反之亦然。 – splash27 2015-03-03 12:48:20