Flexbox 砌体响应式答案

【问题标题】：Flexbox masonry responsiveFlexbox 砌体响应式
【发布时间】：2015-11-13 07:48:21
【问题描述】：

我正在使用 Flexbox Masonry 以漂亮的方式显示 WordPress 帖子，使用 CodePen。它运作良好，但我想让它响应。我已经更改了媒体查询的 CSS，但是如何将 JavaScript 列调整为移动设备、平板电脑和桌面设备？（如手机 1 列，平板 2 列，台式机 3 列）

var container = document.querySelector('#container');
var containerWidth = container.offsetWidth;
var msnry = new Masonry( container, {
  // options
  columnWidth: containerWidth / 3,
  itemSelector: '.flex-item'
});

【问题讨论】：

标签： javascript css flexbox masonry

【解决方案1】：

有一个非常简单的方法可以做到这一点:) 例如当屏幕小于480px(mobile)时运行代码

如果您有这些媒体查询，例如：

@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'
    });
}

为移动设备、平板电脑和台式机执行此操作，一切顺利：)

来源：https://responsivedesign.is/develop/javascript/conditionally-load-javascript-based-on-media-query

【讨论】：

谢谢！它适用于 2 个媒体查询。如果我想使用 1024（小于 1024 像素且大于 480 像素）之类的 JavaScript 怎么办？
您可以只使用 960 或其他内容的代码。两者都不需要。它将在下一个 javascript 块处停止。

【解决方案2】：

您可以使用 jQuery resize() 函数。 https://api.jquery.com/resize/

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

要改变cloumns首先破坏效果。 http://masonry.desandro.com/methods.html#destroy

在第二步中用 2 cloumns 或 5 列或其他任何内容初始化脚本；）

小心调整大小功能，因为每次调整窗口大小时都会触发该事件。

你也可以用 matchMedia 做到这一点：

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

function viewport(mq768) {

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

}

【讨论】：

这可以在 Firefox 中使用吗？不久前我读到一些内容，这不适用于 Firefox。
在最新的 FF (42.0) 中为我工作
很好 :) 很高兴知道。