Flexbox 砌体响应式

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

要换列先破坏效果。 http://masonry.desandro.com/methods.html#destroy

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

请小心调整大小功能，因为您会在每次 window 调整大小时触发该事件。

您也可以使用 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 砌体响应式

Flexbox masonry responsive

javascript

css

flexbox

masonry