0

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

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

功能如下：

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

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

在此处输入图像描述

这不会始终如一地发生，但确实经常发生，但只要我调整窗口大小，脚本就会完全按预期工作：

在此处输入图像描述

那么错误可能在哪里呢？

即使在开始时也肯定会调用该脚本，如果我在函数中放置一个警报，并且只是加载页面（没有调整大小），就会弹出警报。

4

3 回答 3

1

当您计算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加载时的初始布局更好，您可能还希望设置该高度。

于 2013-07-21T13:55:24.913 回答
1

据我了解您的问题，您应该设置图像的属性宽度和高度并使用文档就绪处理程序：

DIV中所有图像的 HTML .links-image：{尽可能为图像指定宽度/高度/alt 属性}

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

JS代码：

$(document).ready(function() {
    $(window).resize(resetHeight).trigger('resize');   
});
于 2013-07-18T10:27:06.300 回答
1

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

虽然我无法在手头的代码中发现问题，但我会尝试在没有 JS 的情况下以另一种方式处理它：清除列并修复组件的高度：假设我希望标题是一行文本，字幕三行，图像已经是固定高度的。

固定高度将为您提供垂直对齐，而 clearfix 将负责列高。

于 2013-07-21T14:33:26.820 回答