Javascript 脚本'；s函数在调整大小时正常工作，但在document.ready上不正常

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

脚本虽然还没有完善/高效，但工作完全符合预期，但有时（？）会在开始时失败

功能如下：

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();
    });   
});

问题是，很多时候当我加载页面时，我会看到：

这种情况并不总是发生，但确实经常发生，但只要我调整窗口大小，脚本就会完全按照预期工作：

那么错误在哪里呢

---

即使在开始时，脚本也会被调用，如果我在函数中添加了一个警报，并且只加载页面（不调整大小），警报就会弹出。

据我所知，您应该设置图像的属性宽度和高度，并使用document ready处理程序：

.links image

DIVs中所有图像的HTML:{如果可能，应始终为图像指定宽度/高度/alt属性}

<div class="links-image" style="margin-top: 53px;">
    <img src="img/list.png" width="210" height="92" alt="">
</div>

---

据我所知，您应该设置图像的属性宽度和高度，并使用document ready处理程序：

.links image

DIVs中所有图像的HTML:{如果可能，应始终为图像指定宽度/高度/alt属性}

<div class="links-image" style="margin-top: 53px;">
    <img src="img/list.png" width="210" height="92" alt="">
</div>

计算maxHeight值时，通过执行

$（“.same height col”）.height（“auto”）

重置在上一次resetHeight调用中设置的所有内联高度。但是，您不会重置添加到链接图像元素的边距顶部属性

这意味着第二次调用resetHeight（以及所有后续时间）时，maxHeight计算结果将不同。要确保每次计算的结果相同，需要在执行计算之前重置链接图像元素上的“边距顶部”属性

$(".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

。

在计算maxHeight值时，通过执行

$(“.same height col”）.height（“auto”）

。但是，您不会重置添加到链接图像元素的页边距顶部属性

这意味着第二次调用resetHeight（以及所有后续时间）时，maxHeight计算将不同。要确保每次的结果相同，需要在执行计算之前重置链接图像元素上的边距顶部属性

$(".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

。

我从您希望框内容组件（标题、字幕和图像）垂直对齐的前提开始如果这不是真的，忽略这个答案

虽然我无法在手边的代码中发现这个问题，但我会尝试另一种方法，没有JS:clearfix列和组件的高度：假设我期望标题是一行文本，字幕是三行，图像已经是固定高度

---

固定高度将使您垂直对齐，而clearfix将处理列高度。

我从一个前提开始，即您希望框内容组件（标题、副标题和图像）在所有三个框中垂直对齐。如果这不是真的，请忽略此答案

虽然我无法在手边的代码中发现这个问题，但我会尝试另一种方法，没有JS:clearfix列和组件的高度：假设我期望标题是一行文本，字幕是三行，图像已经是固定高度

---

固定高度将提供垂直对齐，而clearfix将处理列高度。

这变得越来越奇怪，现在至少它一直处于半断开状态，现在每次加载时，我都会看到这一点，调整大小后会看到：（哪一个是正确的）。你也许应该提供一个在线链接，让我们看看是什么问题。当然！这是测试版，这是脚本的位置。我仍然没有运气，我真的很困惑这可能是什么。@JanDvorak你在使用什么浏览器？以防万一，如果你硬刷新，然后调整窗口大小，你会发现没有区别吗？这是gettin更奇怪的是，现在至少它一直处于半破坏状态，现在每次我加载时都会看到这个，在调整大小后会看到：（哪个是正确的）。你也许应该提供一个在线链接，让我们看看是什么问题。当然！这是实时测试版，这是脚本的位置。我仍然没有运气，我真的很困惑这可能是什么。@JanDvorak你在使用什么浏览器？以防万一，如果你硬刷新，然后调整窗口大小，你会发现没有区别吗？我可以看看你的吗HTML？您的图像是否具有设置的内联大小？如果没有，则在加载之前为0x0。您是在服务器上运行此脚本，还是这是一个用户脚本？@KatCox我正在服务器上运行它。我可以看到您的HTML吗？您的图像是否具有设置的内联大小？如果没有，则在加载之前为0x0。您是在服务器上运行此脚本，还是这是一个用户脚本“你应得的，我就在服务器上运行它！谢谢你！谢谢！我会在10分钟内分配赏金的，你应该得到它：”这就解决了！谢谢！我在10分钟内分配赏金，你应得的：