JS只有在刷新页面几次时才有效答案

【问题标题】：JS only works when refreshing the page a few timesJS只有在刷新页面几次时才有效
【发布时间】：2014-03-05 11:42:46
【问题描述】：

我有 3 列延伸到相同的高度

这是使这 3 列工作的 JS：SEE DEMO

<script>
  $(document).foundation();
</script> 
<script>
   if(!(/iPhone|iPad|iPod|Android|webOS|BlackBerry|Opera Mini|IEMobile/i.test(navigator.userAgent) )) {
jQuery(document).ready(function($){
    var inHeight = $("#wrapper").innerHeight();
    $("#wrapper .col").each(function(){
        $(this).height(inHeight+"px");
        $(this).find('.content').height((inHeight-60)+"px");
    });
}); 
}
</script>

问题是这仅在我刷新页面时才有效。有时我什至需要刷新页面几次才能使其正常工作。有没有办法解决这个问题？谢谢！

这是我的 JS 结构：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="js/modernizr.js"></script>
<script src="js/foundation.min.js"></script> 
<script>
  $(document).foundation();
</script> 
<script>
   if(!(/iPhone|iPad|iPod|Android|webOS|BlackBerry|Opera Mini|IEMobile/i.test(navigator.userAgent) )) {
jQuery(document).ready(function($){
    var inHeight = $("#wrapper").innerHeight();
    $("#wrapper .col").each(function(){
        $(this).height(inHeight+"px");
        $(this).find('.content').height((inHeight-60)+"px");
    });
}); 
}
</script>

【问题讨论】：

只是一个注释：而不是丑陋的正则表达式。使用现代化器。它是专门为此类事情设计的。
你不需要 $.each 因为你没有为每个元素（列）使用细节
您的网站是否也必须针对 IE7 或更低版本？
我只需要瞄准IE8+

标签： javascript css loading multiple-columns

【解决方案1】：

如果根据您的评论，您需要 IE8+ 支持，让我们尝试解决您的问题纯 HTML 方式，无需 JS！！ :)

demo here

从您的代码中删除所有 JS 和 float，然后，请参阅下面标记中的 cmets：

#wrapper {
    height: 100%;
    width:  100%;
    margin: 20px auto;
    display:table; /* added, so your div will behave like css-table */
    overflow: hidden;
}
#wrapper > .col {
    display: table-cell; /* abra-ka-dabra, equal height for all divs!!*/
    width: 30.3%;
    border:1px solid red;
    margin: 0 15px 3px;
    background-color: #fff;
    text-align: center;
    position: relative; /* required, because we need to place button @ he bottom of div*/
    height: 100%;
    -moz-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
    -webkit-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
    box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
}

    div.btn-align-bottom {
        position:absolute; /* place button at the bottom of div */
        bottom:50px; /* placing at proper position */
        left:0; /* needed for centering */
        right:0;/* needed for centering */
        border:1px solid yellow /* just to show you */
    }

编辑

如果根据评论，您的标记中有图片，请务必提及：

img{
    vertical-align:top; /* change default of baseline to top*/
}

working demo

【讨论】：

它会......我假设你只是不知道如何微调事情......最好想出一个答案，而不是仅仅连载否定答案！！！ :)
我没有对你的答案投反对票。我只是去小提琴并添加了一张图片，它打破了它，所以我来这里告诉你，但我没有投反对票。
我会在一段时间内上传带有图像的小提琴......顺便说一句，OP在他的问题中没有图像！！
你看过演示吗？他的问题是他有图像并且在脚本运行时没有加载它们。你能看看他的演示和我的答案吗？
另外，我被同一个反对你的纳粹党反对了……真可惜。

【解决方案2】：

window.onload = function() {
    if(!window.location.hash) {
        window.location = window.location + '#';
        window.location.reload();
    }
}

这个 sn-p 会重新加载你的速度一次

【讨论】：

谢谢，但是我应该把那个 sn-p 放在哪里？对不起，我对 JS 了解不多。
脚本结束

【解决方案3】：

出现问题是因为您的元素是浮动的，因此 DOM 不会将它们视为实体对象。

您需要对CSS 进行一些编辑才能解决问题。

#wrapper {
    height: 100%;
    width: 100%;
    margin: 20px auto;
    overflow: auto;
}

#wrapper > .col {
    display: inline-block;
    float: left;
    width: 30.3%;
    margin: 0 15px 3px;
    background-color: #fff;
    text-align: center;
    position: relative;
    height: 100%;
    -moz-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
    -webkit-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
    box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
    overflow: auto;
}
#wrapper > .col > .content {
    padding: 0 0 35px;
    overflow: auto;
}

对于它的jQuery 方面，您需要将其更改为：

var inHeight = $("#wrapper").innerHeight();
$("#wrapper .col").each(function(){
    $(this).height(inHeight+"px").css('overflow', 'hidden');
    $(this).find('.content').height((inHeight-60)+"px").css('overflow', 'hidden');
});

如果你想尝试一下。

【讨论】：

为什么在这个上下文中声明溢出隐藏，而不是 css 本身？脚本运行时没有高度的图像怎么办？
另外，没有理由将溢出设置隐藏在 JS 而不是 css 中。
在 dom ready 上触发 css 更改与在 css 上设置几乎相同，您可能会在两者之间闪烁。文档就绪时不一定会加载图像。 DOM 就绪意味着整个 HTML 已下载并构建了 DOM 树。那是调用图像资源的时间，因此，它们可能还没有完成。完整的文档加载发生在窗口 onLoad 上，当一切完成时触发。

【解决方案4】：

发生这种情况是因为您在加载图像之前触发了脚本，因此您无法知道 #wrapper 的真实 innerHeight。

您的选项是在 DOM 上指定图像高度

或

在窗口 onLoad 上触发此函数。

另外，你不需要 $.each:

var inHeight = $("#wrapper").innerHeight();
$("#wrapper .col").css("height", inHeight+"px");
$("#wrapper .col .content").css("height", (inHeight-60)+"px");

一种优化的方式（缓存包装器）：

var $wrapper = $("#wrapper");
var inHeight = $wrapper.innerHeight();
$wrapper.find(".col").css("height", inHeight+"px");
$wrapper.find(".col .content").css("height", (inHeight-60)+"px");

【讨论】：