jquery - 使用不同大小的图像构建响应式动画网格

Question

我想要实现的是由许多图像组成的横幅，如下所示：http: //imgur.com/I0NcWdy

图像的尺寸和纵横比不同，但它们出现在同一个布局网格上（因此 HTML/CSS“骨架”可以固定），每个图像在不同的时间出现并带有动画效果（jqueryui 的反弹）。

横幅没有固定的尺寸，它根据窗口的大小按比例缩放，以保持其纵横比。我已经设法获得按比例缩放的 DIV，所以这不是问题。

我正在努力弄清楚如何购买但没有成功，尝试了 Masonry，但我无法像我想要的那样制作动画或放置图像。有什么建议么？

Answer 1

这对你有用吗？

应用自定义类来调整每个图像的大小并可能定位每个图像，例如，简单的如下：

CSS

.image1{
width:10%;
height:auto;
}

.image2{
width:20%;
height:auto;
}  

或者可能：

.image1{
position:relative;
top:0;
left:0;
width:10%;
height:auto;
}  

.image2{
position:relative;
top:0;
left:10%;
width:20%;
height:auto;
}   

.image3{
position:relative;
top:0;
left:30%;
width:15%;
height:auto;
}   

HTML

<div class="header">  
<img class="image1" ....>
<img class="image2" ....>  
....
</div>

自然地，您需要根据图像的细节和相对比例来调整定位和大小。如果这是可行的，尽管它可以很好地扩展并适用于您拥有的任何动画。

祝你好运！