Flexbox砌體響應

Question

我使用的是Flexbox的砌體顯示在一個美麗的方式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 : //sensitivedesign.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個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
        }

}