0

我们几乎完成了基于 Bootstrap 3 的网站的开发，但是在我们需要显示由缩略图和文本组成的列时，它们并不总是正确地换行和对齐。它可以在 Chrome 和 Safari 上运行，但不能 100% 地在 Firefox 上运行，而且我们几乎已经没有什么想法了。

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

描述正在发生的事情的最好方法是让你自己看看。这个页面上有一个很好的例子

将视图设置为显示所有产品并将显示设置为画廊视图。

在页面加载时，脚本（“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 和所有图像加载时触发。如果是这样，我无法解释为什么当页面加载到在 Firefox 中调整窗口大小时脚本的工作方式不同。

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

任何想法、提示和尝试使这项工作正常工作的方法将不胜感激。我希望我对此进行了充分解释，显示页面应该会引发问题。

4

1 回答 1

0

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

“columnConform”脚本通过将一行中所有列的高度（即：与页面顶部的偏移量相同）设置为该行中最高列的高度来工作。

不幸的是，当列的高度不相等时，它们不会输出到正确行中的页面，因此此脚本无法解决问题。

一个微小的变化使脚本认为所有列与页面顶部的偏移量为 0，因此它们都在同一行中，并且都被赋予了最高的高度。

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

代码更改如下：

   // var topPosition = $el.position().top;
      var topPosition = 0;
于 2014-07-03T12:02:51.067 回答