2

我有一个基于 div 的布局，并使用 jQuery 和“setEqualHeights”函数（如下）使布局中的所有列相等。

等高jQuery：

function setEqualHeight(columns) 
{
    var tallestcolumn = 0;
    columns.each(
    function() 
     {
          currentHeight = $(this).height();
          if(currentHeight > tallestcolumn) 
          {
                tallestcolumn = currentHeight;
          }
    }
    );
    columns.height(tallestcolumn);
}

$(window).load(function() {
    setEqualHeight($(".coln_equalize"));
});

HTML 会是这样的：

<div id="wrap">

  <div id="nav-coln" class="coln_equalize">
  ... navigation ...
  </div>

  <div id="content" class="coln_equalize">
  ... content ...
  </div>

</div>

setEqualHeights 工作正常，直到我将 Disqus 添加到组合中。

它似乎是异步加载的，导致布局的高度分解并且不再相等。

Disqus 的 HTML 代码：

<div id="wrap">

  <div id="nav-coln" class="coln_equalize">
  ... navigation ...
  </div>

  <div id="content" class="coln_equalize">

      ... content ...

      <div id="disqus_thread">
        ... disqus stuff ...
      </div>

  </div>

</div>

有时我会刷新，这很好，有时我会刷新，它会再次崩溃。此外，当我添加新评论时，新评论出现在页面上（因此增加了更多高度），布局再次中断。

我的猜测是在 Disqus 完全完成加载之前应用了 setEqualHeights。新评论添加了更多未知的高度变量也无济于事。

有没有办法强制 Disqus 在应用 setEqualHeights 之前完全完成加载？

尝试的解决方案 #1（但失败）：仅在 Disqus 完全加载后加载 setEqualHeights 函数

我已经搜索过类似的问题，到目前为止我想出了这个线程： Getting Equal Height Columns jQuery Plugin and Disqus to Play Nice

但是“解决方案”（或缺乏解决方案）对我不起作用。提到了一种在应用高度函数之前强制 Disqus 完成加载的方法……但是当我尝试代码时它不起作用。

我在下面粘贴了我的尝试：

function setEqualHeight(columns) 
{
    var tallestcolumn = 0;
    columns.each(
    function() 
     {
          currentHeight = $(this).height();
          if(currentHeight > tallestcolumn) 
          {
                tallestcolumn = currentHeight;
          }
    }
    );
    columns.height(tallestcolumn);
}

(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://escapology.disqus.com/embed.js';
var done=false;
dsq.onload=dsq.onreadystatechange = function(){
      if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
        done=true;
        //CALL YOUR EQUAL HEIGHTS JQUERY CODE HERE
            $(window).load(function() {

                $(document).ready(function() {
                    setEqualHeight($(".coln_equalize"));
                });

            });
        // (END) CALL YOUR EQUAL HEIGHTS JQUERY CODE HERE
        dsq.onload = dsq.onreadystatechange = null;
      }
    };
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();

尝试的解决方案 #2（同样失败）：使用 jQuery 获取 Disqus 块的高度，然后使用 jQuery 将其添加为 CSS 高度参数

然后我想我可能会使用一个更简单的脚本来获取 Disqus 的高度，并使用 jQuery 将它作为 CSS 应用。为此，我插入了以下代码来代替“//CALL YOUR EQUAL HEIGHTS JQUERY CODE HERE”块：

$(window).load(function(){
          var dynamic_height = $('div#disqus_thread').height();
          $('div#disqus_thread').css({'height':dynamic_height+'px'});
});

但是，再一次，我相信这个尝试失败了，因为它也在 Disqus 完全完成加载之前被应用，它也失败了，因为它没有捕捉到添加新评论的新高度。

任何帮助，将不胜感激！！

4

0 回答 0