Question

我使用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'
});

Answer 1

这是一个非常简单的方法:)例如，当屏幕小于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'
    });
}

为移动设备，平板电脑和桌面设备做这件事，你会感觉很好：）

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

Answer 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
        }

}

Flexbox砌体响应

2 个答案: