脚本的功能可以在调整大小时正常工作，但不能在document.ready上正常工作

debugcn 发表于 Dev

松露

我有一个函数，可以校正和调整带有文本和图像的三个流体列的大小（和垂直对齐）。

该脚本虽然还不够完善/高效，但是可以完全按预期工作，但有时（？）在一开始会失败。

功能如下：

var resetHeight = function(){
    var maxHeight = 0;
    $(".same-height-col").height("auto").each(function(){
        maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
    }).height(maxHeight + 25);
    var maxTextSize = 0;
    var tempHeight;
    $(".same-height-col").each(function(){
        tempHeight = $(this).find(".links-text").height();
        maxTextSize = tempHeight > maxTextSize ? tempHeight : maxTextSize;
    });
    var topMargin;
    $(".same-height-col").each(function(){
        topMargin = (maxTextSize - $(this).find(".links-text").height()) + 25;
        $(this).find(".links-image").css("margin-top",topMargin);
    });
}

我叫了两次：

$(document).ready(function() {
    resetHeight();    
    $(window).resize(function() {
        resetHeight();
    });   
});

问题是，当我加载页面很多次时，我看到以下内容：

在此处输入图片说明

这种情况不会持续发生，但确实经常发生，但是一旦我调整窗口大小，脚本便会完全按预期工作：

在此处输入图片说明

那么错误可能在哪里呢？

即使在开始时也要确保调用该脚本，如果我在函数中放置了警报，然后仅加载页面（不调整大小），则会弹出警报。

詹姆斯·霍尔德尼斯

在计算maxHeight值时，您可以通过重置所有在上一个resetHeight调用中设置的内联高度$(".same-height-col").height("auto")。但是，您不会重置添加到links-image元素的margin-top属性。

这意味着第二次调用resetHeight（以及随后的所有时间）时，maxHeight计算将有所不同。为了确保每次的结果都相同，您需要在执行计算之前重置links-image元素上的margin-top属性。

$(".same-height-col .links-image").css("margin-top","");
$(".same-height-col").height("auto").each(function(){
    maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
}).height(maxHeight + 25);

您可能还想提高该高度，maxHeight+50而不是maxHeight+25如果您认为调整大小后的布局结果看起来比加载时的初始布局更好。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。