代码之家 › 专栏 › 技术社区 › Alberto Soto

媒体查询加载时动态激活/禁用脚本并调整窗口大小

media-queries window resize css

Alberto Soto · 技术社区 · 6 年前

我正在使用JS砌体网格。我想禁用移动版本中的脚本(宽度小于800px)。

我正在尝试下一个代码:

window.addEventListener('resize', function(){
    if(window.innerWidth > 800){
        ...execute script
    }
});

所有JS代码

window.addEventListener('resize', function(){
  if(window.innerWidth > 900){    

    /* @license minigrid v1.6.0 - minimal cascading grid layout http://alves.im/minigrid */
    !function(t){"use strict";function e(t,e,n,o,r){var i=Array.prototype.forEach,f=t instanceof Node?t:document.querySelector(t);if(!f)return!1;var s=f.querySelectorAll(e);if(0===s.length)return!1;n="number"==typeof n&&isFinite(n)&&Math.floor(n)===n?n:6,f.style.width="";var u=f.getBoundingClientRect().width,l=s[0].getBoundingClientRect().width+n,a=Math.max(Math.floor((u-n)/l),1),c=0;u=l*a+n+"px",f.style.width=u,f.style.position="relative";for(var d=[],p=[],h=0;a>h;h++)p.push(h*l+n),d.push(n);i.call(s,function(t){var e=d.slice(0).sort(function(t,e){return t-e}).shift();e=d.indexOf(e);var r=p[e],f=d[e],s=["webkitTransform","MozTransform","msTransform","OTransform","transform"];return t.style.position="absolute",o||i.call(s,function(e){t.style[e]="translate("+r+"px,"+f+"px)"}),d[e]+=t.getBoundingClientRect().height+n,c+=1,o?o(t,r,f,c):void 0});var m=d.slice(0).sort(function(t,e){return t-e}).pop();f.style.height=m+"px","function"==typeof r&&r(s)}"function"==typeof define&&define.amd?define(function(){return e}):"undefined"!=typeof module&&module.exports?module.exports=e:t.minigrid=e}(this);

    (function(){
        minigrid('.grid', '.grid-item');

        window.addEventListener('resize', function(){
          minigrid('.grid', '.grid-item');
        });
      })();        
  }
});

我对此有两个问题:
1) 加载页面时不起作用,仅在调整窗口大小时起作用。
2) 当我从>更改时不起作用;800至<仅适用于加载瞬间的宽度。

CODEPEN

非常感谢。

1 回复 | 直到 6 年前

Ahmed Sayed 6 年前

您的脚本仅通过窗口调整大小事件调用,以便在您应该使用的页面加载时执行它

window.onload = function() {
    //your code 
}

更新时间:

var oldWidth;

window.addEventListener('resize', function(e){
    if(window.innerWidth > 800 || oldWidth > 800){
        try {
            minigrid('.grid', '.grid-item');
        } catch(e) {
            loadLib();
            minigrid('.grid', '.grid-item');
        }

        oldWidth = window.innerWidth;
    }
});

window.onload = function() {
    minigrid('.grid', '.grid-item');
    oldWidth = window.innerWidth;
}

function loadLib() {
    // minigrid code
}

codepen

推荐文章

zxcvbnm · 为什么字符串::resize和字符串::substr O(1)

2 年前

Heinz · 无法调整非模式html对话框设置style='resize:both'的大小,但可用于模式对话框

2 年前

Alex Cai · 未最大化后的AWT面板布局问题

2 年前

GoGoAllen · 如何针对所有类型的浏览器大小修复我的网页布局?

6 年前

Alberto Soto · 媒体查询加载时动态激活/禁用脚本并调整窗口大小

6 年前

Jojo Narte · 如何将UIView调整为特定的高度和宽度,包括其子视图?

6 年前

Tarzan · Python调整图像大小

6 年前

Eddy · 调整窗体大小时调整标签字体大小

6 年前

Nemo XXX · 如何在QTableView中按比例调整列宽?

6 年前

Brian Hamill · Numpy调整图像大小/重缩放图像

7 年前