Question

我们几乎完成了基于Bootstrap 3的网站的开发，但是我们需要显示包含缩略图和文本的列，它们并不总是正确地包裹和对齐。它可以在Chrome和Safari上运行，但在Firefox上不会100％有效，而且我们几乎没有想法。

我们正在使用CSS Tricks（http://css-tricks.com/equal-height-blocks-in-rows/）中的脚本将行设置为相等的高度。

描述正在发生的事情的最佳方式是让你自己看看。一个很好的例子是this page

将视图设置为“显示所有产品”和“显示到图库视图”。

在页面加载时，脚本（“columnConform”）应该将id为“page-wrap”的列的高度设置为等于每行中最高的列的高度。它并不总是这样做100％。

如果您调整窗口大小，脚本将再次被触发，这次通常效果更好，但在Firefox中不是100％。

设置相同高度的脚本代码如下（在我们的网站上的文件thumbnail-row-fix.js中）：

// these are (ruh-roh) globals. You could wrap in an
    // immediately-Invoked Function Expression (IIFE) if you wanted to...
    var currentTallest = 0,
        currentRowStart = 0,
        rowDivs = new Array();

    function setConformingHeight(el, newHeight) {
        // set the height to something new, but remember the original height in case things change
        el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
        el.height(newHeight);
    }

    function getOriginalHeight(el) {
        // if the height has changed, send the originalHeight
        return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
    }

    function columnConform() {

        // find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
        $('#page-wrap > div').each(function() {

            // "caching"
            var $el = $(this);

            var topPosition = $el.position().top;

            if (currentRowStart != topPosition) {

                // we just came to a new row.  Set all the heights on the completed row
                for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

                // set the variables for the new row
                rowDivs.length = 0; // empty the array
                currentRowStart = topPosition;
                currentTallest = getOriginalHeight($el);
                rowDivs.push($el);

            } else {

                // another div on the current row.  Add it to the list and check if it's taller
                rowDivs.push($el);
                currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest);

            }
            // do the last row
            for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

        });

    }       

    $(window).resize(function() {
        columnConform();
    });

    // Dom Ready
    // You might also want to wait until window.onload if images are the things that
    // are unequalizing the blocks
    window.onload = function() {
        columnConform();
        //$(window).load(function() {
        //columnConform();
//  setTimeout(function(){columnConform()},6000);
    };

据说window.onload或$（window）.load是相同的，并在DOM和ALL图像加载时被触发。如果是这样，我无法解释为什么在Firefox中调整窗口大小时加载页面时脚本的工作方式不同。

也许这是最新版Firefox中的一个错误，但我在论坛上看不到任何相关内容。

任何想法，提示和尝试使这项工作的方法将非常感激。我希望我能够充分解释这一点，显示页面应该触发问题。

Answer 1

我（现在）不得不放弃寻找这个问题的理想解决方案，但设法找到了至少有效的解决方案。

“columnConform”脚本的工作原理是将行中所有列的高度（即：与页面顶部具有相同的偏移量）设置为行中最高列的高度。

不幸的是，如果列具有足够的不等高度，则它们不会输出到正确行中的页面，因此此脚本无法解决问题。

一个小的改动使得脚本认为所有列的偏移量都是从页面顶部开始，因此它们在同一行中都是ALL，并且都被赋予了最高的高度。

如果没有一个列比其他列高很多，这不是问题。幸运的是，在我们的大多数页面中，这样做只会导致行之间的空白区域比我们想要的更多。

代码更改如下：

   // var topPosition = $el.position().top;
      var topPosition = 0;

Bootstrap 3等高排在我们的网站上不能100％工作

1 个答案: