Question

我试图设计一个包含图像列表的页面，并且在重新调整浏览器/窗口大小时，应该调整图像，使图像只有三行。例如，最初我连续有10张图像，整体而言，我在三行中共有30张图像。当我重新调整窗口大小时，应调整图像（随着窗口变小，网格连续变为7个图像，然后连续变为5个图像）。在任何时候我都应该只有3行。

我添加了以下链接，该链接用于同一目的。

e.g。 https://www.mozilla.org/en-US/about/?icm=tabz

任何建议都将受到赞赏。

先谢谢。

Answer 1

该Mozilla页面使用动画响应式图像网格，一个jquery插件：

http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/

你想要像

这样的东西

$(function(){
    $("#the_id_of_your_grid").gridrotator({
        rows:3,
        columns:10,
        w[some number]:{rows:3,columns:7},
        w[some other number]:{rows:3,columns:5}
    })
});

其中两个＆＃34; w [某个数字]：＆＃34;相当于CSS媒体查询@media (max-width: [some number]px)。有关该插件网站的完整文档

如何在浏览器宽度/高度变化时动态调整图像网格的大小？

1 个答案: