The only real important thing here is the data-groups
attribute. It has to be a valid JSON array of strings. Optionally, it can be a string delimeted by a value you provide. See delimeter
in the options.
This example is using this site's grid. Each item would be 4 columns at the "sm" breakpoint (768px).
To see why the images are wrapped in .aspect
elements, check out the images demo.
<div id="grid" class="row my-shuffle-container">
<figure class="col-4@sm picture-item" data-groups='["photography"]' data-date-created="2010-09-14" data-title="Baseball">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img src="/img/baseball.png" alt="" height="145" width="230">
</div>
</div>
<figcaption>Baseball</figcaption>
</figure>
<figure class="col-4@sm picture-item" data-groups='["wallpaper","3d"]' data-date-created="2011-08-14" data-title="Tennis">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img src="/img/tennis-ball.png" alt="" height="145" width="230">
</div>
</div>
<figcaption>Tennis</figcaption>
</figure>
<figure class="col-4@sm picture-item" data-groups='["wallpaper","3d"]' data-date-created="2009-05-27" data-title="iMac">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img src="/img/imac.png" alt="" height="145" width="230">
</div>
</div>
<figcaption>iMac</figcaption>
</figure>
<div class="col-1@sm my-sizer-element"></div>
</div>
There are 4 options for defining the width of the columns:
width
and margin-left
of this sizer
element each time the grid resizes. This is awesome for responsive or fluid grids where the width of a column is a percentage.If you want functional buttons, check out the js file.
Shuffle uses a UMD definition so that you can use it with globals, AMD, or CommonJS.
var Shuffle = window.shuffle;
var element = document.getElementById('grid');
var sizer = element.querySelector('.my-sizer-element');
var shuffle = new Shuffle(element, {
itemSelector: '.picture-item',
sizer: sizer // could also be a selector: '.my-sizer-element'
});