Question

我使用Ben Howdle的javascript解决方案来制作虚拟专栏。他有两个在他的网站上发布的实现：http://benhowdle.im/easy-peasy-equal-heights.html

一行是一行，另一行是两行。

我在两行上使用它。我使用他建议使用的代码片段来代替他为一行提供的代码。

我想知道他是否遗漏了这些信息，或者我是否做错了。如果我以一定的大小加载页面，它工作正常，但一旦我开始调整大小，列重叠。这是我的网址示例：http://lucillekenney-demos.com/prototype1.html

这是他为页面上的多个集合建议的代码：

<div class="sameHeights">
    <div data-key="sameHeights"></div>
    <div data-key="sameHeights"></div>
    <div data-key="sameHeights"></div>
    <div data-key="sameHeights"></div>
    <div data-key="sameHeights"></div>
</div>

<div class="otherSameHeights">
    <div data-key="otherSameHeights"></div>
    <div data-key="otherSameHeights"></div>
    <div data-key="otherSameHeights"></div>
    <div data-key="otherSameHeights"></div>
    <div data-key="otherSameHeights"></div>
</div>

and 

<script type="text/javascript">
    if ('addEventListener' in window) {
        // first group
        window.addEventListener('resize', function(){
            sameHeights('[data-key="sameHeights"]');
        });
        window.addEventListener('load', function(){
            sameHeights('[data-key="sameHeights"]');
        });

        // second group
        window.addEventListener('resize', function(){
            sameHeights('[data-key="otherSameHeights"]');
        });
        window.addEventListener('load', function(){
            sameHeights('[data-key="otherSameHeights"]');
        });
    }
</script>

但他没有提出任何改变实际功能的建议：

<script type="text/javascript">
    function sameHeights(selector) {
        var selector = selector || '[data-key="sameHeights"]',
            query = document.querySelectorAll(selector),
            elements = query.length,
            max = 0;
        if (elements) {
            while (elements--) {
                var element = query[elements];
                if (element.clientHeight > max) {
                    max = element.clientHeight;
                }
            }
            elements = query.length;
            while (elements--) {
                var element = query[elements];
                element.style.height = max + 'px';
            }
        }
    }
</script>

这个问题的第二部分是当窗口调整到移动视图时，单个列之间有很多空间。单列不需要javascript相等的高度，需要在此列停用。

当使用＆＃34; Ben Howdle Easy Peasy Equal Heights Faux Columns＆＃34;

0 个答案: