White Space
WebLife

Masonry.js で PC とスマホでオプションを切り替える

  • Javascript

Masonry.js では gutter で余白を決めたりできますが、SP と PC で別々に設定する方法がわからなかったので、設定したビューポートを越えた時点でオプションを設定し直す方法です。

webpack を使っているので、最初の二行で読み込みを行ってますが普通に<script src="***">でhtmlファイルに読み込んでる場合は取り除いてください。

コード

HTML

<ul class="masonry">
  <li class="masonry-item"><img src="...">
  <li class="masonry-item"><img src="...">
  <li class="masonry-item"><img src="...">
</ul>

JS

import $ from 'jquery'
import Masonry from 'masonry-layout';

// ブレイクポイント
BREAK_POINT_MAX_SP = 736;

// selector
const list = '.masonry';
const item = '.masonry-item';

// viewport threshold
let threshold = '';
let thresholdBefore = '';

// masonry 
let msnry = '';
let msnry_options = {
  itemSelector: item,
}

$(window).on('load resize', function(){

  thresholdBefore = threshold;
  threshold = BREAK_POINT_MAX_SP < $(this).width() ? 'pc' : 'sp';

  // is SP
  if (threshold === 'sp') {
    msnry_options.gutter = 5;
  // is PC
  } else { 
    msnry_options.gutter = 10;
  }

  // If threshold is changed (or when window loaded), Dispatch an event
  if (thresholdBefore !== threshold) {
    $(window).trigger('changeBreakpoint');
  }
});


$(window).on('changeBreakpoint', function(){
  // If Masonry exists, Destory it
  if (msnry !== '') {
    msnry.destroy();
  }
  // Initialize Masonry
  msnry = new Masonry(list, msnry_options);
});

変数

  • BREAK_POINT_MAX_SP SP用のブレイクポイントを設定
  • list masonry を実行する要素
  • item masonry を実行する要素のアイテム
  • msnry_options PC/SP 共通で設定するオプション。公式サイトを参照。

windows の width を監視して、あらかじめ決めておいたブレイクポイントに達したら瞬間のみイベントを発火させています。

PC と SP でそれぞれ設定を変更する

例として、gutter を変更しています。SP なら 10、PC なら 30。量が多い場合はまとめて定義して結合などした方が良いかもしれません。

  // is SP
  if (threshold === 'sp') {
    msnry_options.gutter = 10;
    // msnry_options.なんかのオプション = なんか;
  // is PC
  } else { 
    msnry_options.gutter = 30;
  }

全部 jQuery にするとき

もしセレクタも jQuery を使うときは、下記を変更します。

msnry.destroy();
↓
msnry.masonry('destroy');
msnry = new Masonry(list, msnry_options);
↓
msnry = $(list).masonry(msnry_options);