Javascript jQuery可变高度

我正在尝试创建一个图像库，其中标题垂直居中于幻灯片中，下面是我正在使用的代码

$(window).load(function() {

    var imageHeight = $('.flexslider .slides li img').height();

    var captionTop = imageHeight - $('.title-cap').height();
    var captionTop = captionTop/2;
    $('.title-cap').css('top',captionTop + 'px');

    var captionTopOne = imageHeight - $('.sub-cap-one').height();
    var captionTopOne = captionTopOne/2;
    $('.sub-cap-one').css('top',captionTopOne + 'px');

    var captionTopTwo = imageHeight - $('.sub-cap-two').height();
    var captionTopTwo = captionTopTwo/2;
    $('.sub-cap-two').css('top',captionTopTwo + 'px');

    var captionTopThr = imageHeight - $('.sub-cap-three').height();
    var captionTopThr = captionTopThr/2;
    $('.sub-cap-three').css('top',captionTopThr + 'px');

});

标题是绝对定位，我用顶部做中心

所以我的想法是，得到基本幻灯片图像的高度，以保持其响应性，减去当前标题的高度，然后除以以最大值结尾的两个

第一个实例是有效的，有“标题上限”，但接下来的三个则没有。它们都返回相同的错误值。所有标题类都有相同的属性，只是赋值不同

另外，为了使值随浏览器窗口大小实时动态变化，我需要添加什么

编辑：好的，做了一些研究，找出了加载/调整大小部分。 这就是我现在拥有的

function setContent(){
   [Added all of the above minus the onload part in here]
}
$(window).load(function() {
   setContent();
});
$(window).resize(function() {
   setContent();
});

---

现在只是不知道为什么副盖没有正确加载。有什么想法吗？

我在尝试获取隐藏元素的大小时遇到了类似的问题。我觉得这个不错。这可能是您所需要的。

您只在窗口加载其内容时才计算这些值，但我认为您需要使用$（window）计算大小。on（'resize'，//您的代码）。您能为每个类提供css和标记吗？@RobertSmith是正确的。您需要在窗口调整大小事件中执行此代码。在计算图像高度之前，还需要确保图像已加载。要做到这一点，您可以将window.load函数下的代码包装在$（'.flexslider.slides li img'）.load（…）。@Robert，听起来不错，我尝试过使用它，但我的窗口变黑了，不会冻结，因为我可以使用backspace并向后导航…@tj，好的，我试试。这是代码，我甚至没有想到这是个问题。不过，这起了作用。非常感谢。