javascript - 找到最远的 DIV 的最便宜的方法？

Question

假设我们有一个 width 和 height 未知的容器 div，它小于主体的完整尺寸。

此容器 div 包含 未知数量 的 div。容器中的所有 div 都具有不同的大小，除此之外具有与以下 3 种类型之一相同的 CSS:

• 类型 1:所有 div 都向左浮动。
• 类型 2:所有 div 都是向右浮动。
• 类型 3:所有 div 都具有未知的绝对值位置，甚至可以放置在远离屏幕的位置。

类型 1 和类型 2 div 有边距，可能也有填充。 Type 3 div 可能有其中之一，没有或两者都有。

鉴于容器中的 div 类型未知 - 最终目标是在原始容器中添加一个辅助容器，其大小足以容纳视口(viewport)中的所有 div(溢出:滚动)。 计算成本最低的方法是什么？

注意事项:

1. divs 可能会也可能不会(作为一个整体)有 box-sizing: border-box。这将影响其边框、边距和填充的呈现方式，也应予以考虑。

2. 在类型 1 和 2( float div)的情况下，div 旨在水平堆叠 - 即，容器应增长以适应其总宽度。应考虑到这一点。

3. 例如，最右边的 div 的右边距应该被计算在内，并且应该增加容器的宽度。这同样适用于顶部、底部和最左侧的 div。

4. 不需要 IE8 及以下版本。

5. 请仅使用 vanilla Javascript。没有像 jQuery 等框架。

谢谢!

一些可视化:

Answer 1

您可能必须自己进行性能测试才能确定哪种方法最快，但无论如何，这是一种非常快速的方法。 ( jsfiddle )

function getOuterBoxDimensions() {
    var original = document.getElementById('original'),
        divs = original.getElementsByTagName('div'),
        left = 0,
        right = original.offsetWidth,
        top = 0,
        bottom = original.offsetHeight;
    for (var i = 0, div; div = divs[i++];) {
        if (div.offsetTop < top) {
            top = div.offsetTop;
        }
        if (div.offsetTop + div.offsetHeight > bottom) {
            bottom = div.offsetTop + div.offsetHeight;
        }
        if (div.offsetLeft < left) {
            left = div.offsetLeft;
        }
        if (div.offsetLeft + div.offsetWidth > right) {
            right = div.offsetLeft + div.offsetWidth;
        }
    }
    return {
        top: top,
        left: left,
        bottom: bottom,
        right: right
    };
    // Note that dimensions are relative to the original div top left
}

据我所知，无论是否设置了 box-sizing: border-box，offsetLeft、offsetWidth 等都会返回正确的尺寸。如果您在内部 div 中有 div，那么事情会变得有点复杂 - 您将只想检查作为原始子节点的 div。

编辑:这是一个扩展版本，它适本地考虑了边距并扩展了新容器以在一行中容纳所有 float div(请参阅评论中的讨论)。 http://jsfiddle.net/m7N2J/10/

function getOuterBoxDimensions() {
    var original = document.getElementById('original'),
        divs = original.getElementsByTagName('div'),
        left = 0,
        right = original.offsetWidth,
        top = 0,
        bottom = original.offsetHeight,
        d = document.defaultView,
        style, marginTop, marginBottom, marginLeft, marginRight, float, floatWidth = 0;
    for (var i = 0, div; div = divs[i++];) {
        if (style = div.currentStyle) {
            // May be possible to exclude this if IE7/8 not needed
            marginTop = parseFloat(style.marginTop);
            marginBottom = parseFloat(style.marginBottom);
            marginLeft = parseFloat(style.marginLeft);
            marginRight = parseFloat(style.marginRight);
            float = style.float;
        }
        else {
            style = d.getComputedStyle(div, null);
            marginTop = parseFloat(style.getPropertyValue('margin-top'));
            marginBottom = parseFloat(style.getPropertyValue('margin-bottom'));
            marginLeft = parseFloat(style.getPropertyValue('margin-left'));
            marginRight = parseFloat(style.getPropertyValue('margin-right'));
            float = style.getPropertyValue('float');
        }
        if (float == 'left' || float == 'right') {
            floatWidth += div.offsetWidth + marginLeft + marginRight;
            if (div.offsetHeight + marginBottom > bottom) {
                bottom = div.offsetHeight + marginBottom;
            }
        }
        else {
            if (div.offsetTop - marginTop < top) {
                top = div.offsetTop - marginTop;
            }
            if (div.offsetTop + div.offsetHeight + marginBottom > bottom) {
                bottom = div.offsetTop + div.offsetHeight + marginBottom;
            }
            if (div.offsetLeft < left - marginLeft) {
                left = div.offsetLeft - marginLeft;
            }
            if (div.offsetLeft + div.offsetWidth + marginRight > right) {
                right = div.offsetLeft + div.offsetWidth + marginRight;
            }
        }
    }
    if (right < left + floatWidth) {
        right = left + floatWidth;
    }
    return {
        top: top,
        left: left,
        bottom: bottom,
        right: right
    };
    // Note that dimensions are relative to the original div
}