Javascript

【Javascript】レスポンシブグリッドを分類し、ソート、フィルタリングさせるShuffle

March 9, 2018
shuffle

Shuffleはレスポンシブグリッドを分類し、ソート、フィルタリングさせることができるライブラリー。

Options

// Overrideable options
Shuffle.options = {
  buffer: 0, // Useful for percentage based heights when they might not always be exactly the same (in pixels).
  columnThreshold: 0.01, // Reading the width of elements isn't precise enough and can cause columns to jump between values.
  columnWidth: 0, // A static number or function that returns a number which tells the plugin how wide the columns are (in pixels).
  delimeter: null, // If your group is not json, and is comma delimeted, you could set delimeter to ','.
  easing: 'cubic-bezier(0.4, 0.0, 0.2, 1)', // CSS easing function to use.
  filterMode: Shuffle.FilterMode.ANY, // When using an array with filter(), the element passes the test if any of its groups are in the array. With "all", the element only passes if all groups are in the array.
  group: Shuffle.ALL_ITEMS, // Initial filter group.
  gutterWidth: 0, // A static number or function that tells the plugin how wide the gutters between columns are (in pixels).
  initialSort: null, // Shuffle can be initialized with a sort object. It is the same object given to the sort method.
  isCentered: false, // Attempt to center grid items in each row.
  itemSelector: '*', // e.g. '.picture-item'.
  roundTransforms: true, // Whether to round pixel values used in translate(x, y). This usually avoids blurriness.
  sizer: null, // Element or selector string. Use an element to determine the size of columns and gutters.
  speed: 250, // Transition/animation speed (milliseconds).
  staggerAmount: 15, // Transition delay offset for each item in milliseconds.
  staggerAmountMax: 150, // Maximum stagger delay in milliseconds.
  throttle: throttle, // By default, shuffle will throttle resize events. This can be changed or removed.
  throttleTime: 300, // How often shuffle can be called on resize (in milliseconds).
  useTransforms: true, // Whether to use transforms or absolute positioning.
};

Usage

<div class="row my-shuffle-container">
  <figure class="col-4@sm picture-item" data-groups='["animal"]' data-date-created="2016-08-12" data-title="Crocodile">
    <div class="aspect aspect--16x9">
      <div class="aspect__inner">
        <img src="crocodile.jpg" alt="A close, profile view of a crocodile looking directly into the camera" />
      </div>
    </div>
    <figcaption>Crocodile</figcaption>
  </figure>
  <figure class="col-4@sm picture-item" data-groups='["city"]' data-date-created="2016-06-09" data-title="Crossroads">
    <div class="aspect aspect--16x9">
      <div class="aspect__inner">
        <img src="crossroads.jpg" alt="A multi-level highway stack interchange in Puxi, Shanghai" />
      </div>
    </div>
    <figcaption>Crossroads</figcaption>
  </figure>
  <figure class="col-4@sm picture-item" data-groups='["nature","city"]' data-date-created="2015-10-20" data-title="Central Park">
    <div class="aspect aspect--16x9">
      <div class="aspect__inner">
        <img src="central-park.jpg" alt="Looking down on central park and the surrounding builds from the Rockefellar Center" />
      </div>
    </div>
    <figcaption>Central Park</figcaption>
  </figure>
  <div class="col-1@sm my-sizer-element"></div>
</div>

A basic setup example

var Shuffle = window.Shuffle;
var element = document.querySelector('.my-shuffle-container');
var sizer = element.querySelector('.my-sizer-element');

var shuffleInstance = new Shuffle(element, {
  itemSelector: '.picture-item',
  sizer: sizer // could also be a selector: '.my-sizer-element'
});

Supported Browsers

  1. Chrome
  2. Firefox
  3. Edge
  4. IE 11
  5. Safari

MIT