0

我遇到了一个等高脚本的问题，它使我的 4 个连续 div 的高度相等。在一个 div 中，我有 neosmart-stream，它将我最新的 facebook 帖子加载到 div 中。其他 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()，这些会有冲突吗？有没有办法可以设置一个在另一个之后加载这么多毫秒？

4

4 回答 4

0

如果您使用的是 jQuery，则可以将调整大小脚本填充到$(window).load事件中，如下所示：

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

这样，浏览器会等待整个页面（图形、图像和 iframe）加载完毕，然后再触发您的调整大小脚本。

这意味着，如果有任何东西被挂起——比如，用户在 2G 网络上，或者外部资源无法加载——那么你的盒子永远不会调整大小。不过，我以前使用过它，只要您知道风险，它就可以轻松快速地解决。

于 2013-10-22T00:30:55.683 回答
0

我用这个作弊了一点。resize 脚本在页面加载和调整大小时激活。所以我添加了另一个事件监听器，以便在用户向下滚动时激活脚本。这是有效的，因为无论如何调整大小的框都在所有屏幕和设备的首屏下方（除了特别长的屏幕，但你多久遇到一次？）我必须正确地弄清楚，但现在这有效。

于 2013-10-28T04:30:02.287 回答
0

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

于 2013-10-22T00:18:02.917 回答
0

如果您使用的是 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
};
于 2013-10-22T00:22:42.180 回答