Question

我遇到了一个高度相同的脚本问题，这使得我的4个div连续高度相等。在一个div中，我有neosmart-stream，它在div中加载我最新的facebook帖子。其他div应该与高度匹配，问题是div高度匹配最先加载的最高div，其中包含目录图片。

我想在我的facebook帖子加载后能够运行相等的高度脚本。以下是该网站的链接：http://www.guitarworldcityarcade.com.au/ 它适用于旋转横幅下方的4个深灰色框。

抱歉，我没有提供代码的错误。以下是相同高度的代码：

<script>
  equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.module');
});

$(window).resize(function(){
  equalheight('.module');
});
  </script>

以下是facebook帖子的代码：

<div class="module">

<h1>News</h1>

<script type='text/javascript' src='http://www.guitarworldcityarcade.com.au/neosmart-stream/nss-includes/jquery.js'></script>

<script type='text/javascript' src='http://www.guitarworldcityarcade.com.au/neosmart-stream/nss-core/jquery.neosmart.stream.js'></script>

<link href='http://www.guitarworldcityarcade.com.au/neosmart-stream/nss-core/core.css' type='text/css' rel='stylesheet' />

<link href='http://www.guitarworldcityarcade.com.au/neosmart-stream/nss-content/themes/base/style.css' type='text/css' rel='stylesheet' />

<script type='text/javascript'>(function(window){window.onload=function(){jQuery(function(){jQuery('#nss').neosmartStream({introFadeIn:695,masonry:false,cache_time:60,theme:'base',path:'http://www.guitarworldcityarcade.com.au/neosmart-stream/',channel_group:'all',auto_refresh:true,auto_refresh_time:60})})}})(window);</script>

这只是一些脚本，facebook帖子是一个插件。四个div具有.module类

一个有window.load（function（））而另一个window.onload = function（），这些会有冲突吗？有没有办法可以设置一个在另一个之后加载这么多毫秒？

Answer 1

我不知道您当前的代码是什么，因为您没有发布任何代码段，但您可能只想尝试经典表。或者，您可能希望尝试将每个容器设置为100％高度（css）并让它们彼此相邻浮动。如果这不能解决您的问题，您可能希望使用一些代码段改进您的问题，而不是让我们完成所有工作。

Answer 2

如果您使用的是Facebook Javascript SDK，那么您应该能够使用异步代码并指定高度函数在window.fbAsyncInit函数中运行。但是，您可能仍需要等待，才能在知道自己的真实高度之前应用CSS和样式。

window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
        appId      : 'YOUR_APP_ID',                        // App ID from the app dashboard
        channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
        status     : true,                                 // Check Facebook Login status
        xfbml      : true                                  // Look for social plugins on the page
    });

    // Additional initialization code such as adding Event Listeners goes here
};

Answer 3

如果你正在使用jQuery，你可以将你的缩放器脚本填入$(window).load事件中，如下所示：

$(window).load(function(){
    // Your resize code
});

这样，浏览器会在激活缩放器脚本之前等待整个页面（图形，图像和iframe）加载。

这意味着如果有任何事情被挂起 - 比如用户在2G网络上，或外部资源无法加载 - 那么你的盒子永远不会调整大小。不过，我之前使用过它，只要你知道风险，这是一个简单快捷的解决方案。

Answer 4

我对这个骗了一点。加载页面和调整页面大小时，resize脚本会激活。所以我添加了另一个事件监听器，以便在用户向下滚动时激活脚本。这是有效的，因为调整大小的盒子无论如何都在所有屏幕和设备上都是低于折叠（除了特别长的屏幕，但你经常遇到它们？）我必须正确地解决这个问题，但现在这样做了。

加载后加载一个函数

4 个答案: