根据窗口大小调整同位素项目的大小

Question

我是新手，我正在寻找一种解决方案，让媒体查询在javascript中呈现。我需要根据窗口大小改变同位素项目的高度。我检查了现有的主题，但我找不到确切的答案。除了媒体查询之外，我的脚本正在运行。

如何应用 if（screen.width＆lt; = 550）？

jQuery(function() {
var jQuerycontainer = jQuery('#isotope-container');
jQuerycontainer.addClass('clickable');

if (screen.width <= 550) {
    jQuerycontainer.isotope({
        animationEngine : "best-available",
        itemSelector : '.isotope-element',
        layoutMode : "perfectMasonry",
        perfectMasonry : {
            columnWidth : 52,
            rowHeight : 15,
        }
    });
} else if (screen.width > 550) {
    jQuerycontainer.isotope({
        itemSelector : '.isotope-element',
        layoutMode : "perfectMasonry",
        perfectMasonry : {
            columnWidth : 52,
            rowHeight : 110,
        }
    });
}

jQuerycontainer.isotope('reload')    etc. etc.

感谢任何提示。

Answer 1

这是同位素页面的一个例子 http://isotope.metafizzy.co/demos/fluid-responsive.html