响应式列表，可在浏览器缩小时重新排列

Responsive list to rearrange when browser is shrinking

本文关键字：新排列 排列 小时 缩小 列表 浏览器 响应      更新时间：2023-09-26

基本上，我正在构建一个简单的登录页面，它将是全宽的，并包含图像网格。图像的容器 （li） 为 17%

当我折叠浏览器时，我知道我可以使用媒体查询来更改 li 容器的大小，但我如何使用 jquery 来做到这一点？

我有 6 个坐在

一行上，但是当我缩小窗口时，我希望一行有 5 个，然后当我进一步缩小浏览器时，我想要 4 个，依此类推

听起来可能有点令人困惑 - 任何帮助将不胜感激

提前谢谢你

<div class="container">
<ul> 
 <li class="landscape"><a class="button" href="popup2"><img src="/someimg.jpg" class="img-responsive" /></a></li>
 <li class="landscape"><a class="button" href="popup2"><img src="/someimg.jpg" class="img-responsive" /></a></li>
 <li class="landscape"><a class="button" href="popup2"><img src="/someimg.jpg" class="img-responsive" /></a></li>
 <li class="landscape"><a class="button" href="popup2"><img src="/someimg.jpg" class="img-responsive" /></a></li>
 <li class="landscape"><a class="button" href="popup2"><img src="/someimg.jpg" class="img-responsive" /></a></li>
 <li class="landscape"><a class="button" href="popup2"><img src="/someimg.jpg" class="img-responsive" /></a></li>
</ul>
</div>

每次用户调整窗口大小时，都可以使用 window.resize 函数。

jQuery ->

 $( window ).resize(function() {
  // put your code here
});

JavaScript ->

window.onresize = function(event) {
    // put your code here
};

你仍然可以通过媒体查询和 css 实现你想要的，有什么理由需要使用 jquery 吗？

修改每个断点处的 li 宽度以填充 100% 容器。 例如 33% 在 768px（3 张图片），25% 在 1024px（4 张图片）等

如果要删除这些元素，只需使用第 n 个子选择器将它们隐藏在相对大小处。如果它们可见，将在下面以您指定的大小显示（我假设这些元素使用浮点数）

给容器width:100%和 li 固定宽度或inline-blockhttps://jsfiddle.net/vv6t9pud/

相关文章：