Question

方案

我有一个容器（会有更多），里面有列表项，每个都包含一个图像。容器的高度相对于列表项的高度是动态的，列表项本身在媒体查询中发生变化。容器具有最小高度，因此当图像较大时，想法是调整容器的大小，向下滑动。

我目前正在获取页面加载时图像列表项的高度，但这并不是很好，因为它们是相当多的图像所以它可能需要一段时间才能进行调整。

不幸的是，这是一个相当大的项目，我无法完全复制jsfiddle中的场景，我认为这已足够接近。

解决方案

我需要一些方法来获取加载的第一个图像列表项的高度，然后使容器具有相同的高度。

代码

的 HTML 的

<ul class="container">
    <li class="img">
        <img src="http://www.lorempixel.com/50/100" width="100%" height="100%" />
    </li>
    <li class="img">
        <img src="http://www.lorempixel.com/50/100" width="100%" height="100%" />
    </li>
    <li class="img">
        <img src="http://www.lorempixel.com/50/100" width="100%" height="100%" />
    </li>
...so on
</ul>

的 CSS 的

li {
    list-style: none;
}
.img {
    float: left;
    height: 100px;
    overflow: hidden;
    width: 50px;
}
.container {
    border:5px solid green;
    width:100%;
    overflow: hidden;
    min-height:100px;
}
@media only screen and (max-width: 500px) {
    .img {
        width: 25%; height: auto;
    }

}

的的js 的

$(window).load(function() {

    $('.container').each(function() {
        $(this).animate({
            height: $('.img').height(),
            slideDown: 'fast'
        });
    }); 

});

演示

http://jsfiddle.net/ZwQu7/1/

谢谢你的时间。

Answer 1

必须先加载图片才能访问其实际尺寸，但您可以使用getimagesize()计算服务器端的总初始尺寸（假设您使用的是php）。

或者如果您知道所有图像的大小（我看到你写了100px），你可以将它们的初始数相乘得到总高度。

或者在图片加载时将像素添加到容器的高度：

$('.container img').on('load', function() {
    var $c = $(this).parents('.container');
    $c.css('height', (($c.height() || 0) + this.height) + 'px');
});

Answer 2

或者你可以这样做：

$('.container').each(function() {
    $(this).find('img').load(function(){
        $(this).closest('.container').animate({
            height: $(this).height(),
            slideDown: 'fast'
        });
    })
});

通过这种方式，您可以等待图像加载（这样您就可以知道图像的高度）并在此之后为其设置动画。

（li没有高度，img会。）

如果您只想对container进行动画检查，请执行以下操作：

$('.container').each(function() {
    $(this).find('img').load(function(){
        $(this).closest('.container:not(.animated)').animate({
            height: $(this).height(),
            slideDown: 'fast'
        }).addClass('animated');
    })
});

但是，只要加载了第一张图像，它就会生成动画，并且在此之后不会生成动画。

Answer 3

这是我设法开始工作的解决方案（如果有人有兴趣），感谢putvande：

$('.container').each(function() {
    $(this).find('img').load(function(){
        $(this).closest('.container').animate({
            height: $('.img').height(),
            slideDown: 'fast'
        });
    });
});

再一次，谢谢你的意见。收率

列表项上的jQuery动态高度

3 个答案: