Question

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

Equal Heights 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>

有时我会刷新并且很好，有时候我会刷新并再次分解。此外，当我添加新评论，并且页面上出现新评论（从而增加更多高度）时，布局再次中断。

我的猜测是在完全加载完成后才会应用setEqualHeights。并且新评论添加更多未知高度变量也无济于事。

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

ATTEMPTED SOLUTION＃1（但失败了）：只加载setEqualHeights函数AFTER Disqus已满载

我搜索过类似的问题，到目前为止我想出了这个帖子： 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);
})();

ATTEMPTED SOLUTION＃2（也失败了）：使用jQuery获取Disqus块的高度，然后使用jQuery将其添加为CSS高度参数

然后我想我可能会使用一个更简单的脚本来获得Disqus的高度，并使用jQuery将其应用为CSS。为此，我插入以下代码代替“//在此处调用你的平等法术代码”块：

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

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

任何帮助将不胜感激!!

如何使用jQuery和Disqus评论系统为div布局设置相同的高度

setEqualHeights工作正常，直到我将Disqus添加到混音中。

0 个答案: