1

设想

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

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

不幸的是，这是一个相当大的项目，我无法准确复制 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/

感谢您的时间。

4

3 回答 3

1

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

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

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

$('.container img').on('load', function() {
    var $c = $(this).parents('.container');
    $c.css('height', (($c.height() || 0) + this.height) + 'px');
});
于 2013-08-07T11:21:05.703 回答
0

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

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

再次感谢大家的意见。Y。

于 2013-08-07T12:35:26.230 回答
0

或者你可以这样做：

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

但这将在加载第一张图像后立即进行动画处理，之后将不再进行动画处理。

于 2013-08-07T11:24:57.107 回答