Javascript 柔性箱砌体

我使用Flexbox砖石以一种漂亮的方式显示WordPress帖子，使用这个。 它工作得很好，但我想让它反应灵敏。我已经更改了媒体查询的CSS，但是如何调整移动、平板和桌面的JavaScript列？（如mobile 1列、tablet 2列、desktop 3列）

---

有一种非常简单的方法可以做到这一点：）例如，当屏幕小于

480px时运行代码（移动）

如果您有以下媒体查询，例如：

@media all and (max-width: 480px) {
    // styles
}

您可以使用以下javascript代码：

if (document.documentElement.clientWidth < 480) {
    var container = document.querySelector('#container');
    var containerWidth = container.offsetWidth;
    var msnry = new Masonry( container, {
      // options
      columnWidth: containerWidth / 3, // you can change 3 to 1 right?
      itemSelector: '.flex-item'
    });
}

if（document.documentElement.clientWidth<480）{
var container=document.querySelector（“#container”）；
var containerWidth=container.offsetWidth；
var msnry=新砌体（容器、{
//选择权
columnWidth:containerWidth/3，//您可以将3更改为1，对吗？
项目选择器：'.flex项目'
});
}

在手机、平板电脑和台式机上执行此操作，您就可以开始了：）

来源：
您可以使用jQuery resize（）函数。

非常感谢。它适用于2个媒体查询。如果我想使用像<480和>1024（小于1024px，大于480px）这样的JavaScript呢？你可以使用<480、<760、<960和>960之类的代码。两者都不需要。它将在下一个javascript块停止。这在Firefox中有效吗？我不久前读到一篇文章，说这在Firefox上不起作用。在最新的FF（42.0）中对我起作用。很高兴知道。
if (document.documentElement.clientWidth < 480) {
    var container = document.querySelector('#container');
    var containerWidth = container.offsetWidth;
    var msnry = new Masonry( container, {
      // options
      columnWidth: containerWidth / 3, // you can change 3 to 1 right?
      itemSelector: '.flex-item'
    });
}

$( window ).resize(function() {
  var window_width = $(window).width();
  if (window_width < 768) {
    //do something
  }
});

/*======================================*/
/*== JS MediaQueries */
/*======================================*/
    if (matchMedia) {
        var mq768 = window.matchMedia( "(min-width: 768px)" );
        mq768.addListener(viewport);
        viewport(mq768);
    }   

function viewport(mq768) {

        if (mq768.matches) {
           // do something
        }

}