Jquery 如何在纵向和横向倾斜时实现自动响应？

我有一个网站在上面使用了jaliswall.js，我想让它在android平板电脑上自动响应用户在纵向和横向模式下的倾斜

这是jaliswall.js的css，用于使其具有响应性：

       .wall-column {
            display: block;
            position: relative;
            width: 33.333333%;
            float: left;
            padding: 0 5px;
            box-sizing: border-box;
        }

        @media (max-width: 800px) {

            .wall-column {
                width: 50%;
            }
        }

        @media (max-width: 480px) {

            .wall-column {
                width: auto;
                float: none;
            }
        }

当我以纵向模式加载页面时，它看起来正常（该项目每行显示2个项目）：

但是，如果我将其倾斜到横向模式，它仍将显示2项，而不是每行显示3项：

但是，如果我刷新页面，它看起来会正常（该项目每行显示3个项目）：

顺便说一句，纵向时我的标签大小为800 x 1232，横向时我的标签大小为1280 x 752

我的问题是，当我在不刷新页面的情况下将其从纵向倾斜到横向时，如何使其自动响应

---

谢谢大家!

您可以在

window.addEventListener（'resize'，function（）{…}）

或jQuery，

$（window）.on（'resize'，function（）{…}）

中使用resize事件

---

在该函数中，您需要做的就是触发列的重新计算，这可能需要对jaliswall.js脚本进行一些编辑，以便在IIFE之外可以使用

init（）

。或者，您可以直接触发。

强烈建议使用

display:flex（带有所有供应商前缀）

它非常适合你想做的事情

而且，现在css版面的学习是强制性的

这里有一个很棒的，强烈建议您学习它