响应式网格分类动画自适应、排序和筛选插件

简要教程

国外非常有名的一个洗牌相册，动画自适应，实现完美的布局，从移动端到pc端的完美变化，还可以搜索，过滤等功能。

使用方法
第一步导入css样式:

<link rel="stylesheet" href="style.css">

第二步导入js:

<script src="shuffle.js"></script>

第三步html代码:

<div class="container">
  <div class="js-grid my-shuffle">
    <figure class="col-6@xs col-12@sm col-3@md picture-item">
      <div class="aspect aspect--16x9">
        <div class="aspect__inner"><img src="https://picsum.photos/409?image=500" /></div>
      </div>
    </figure>
    <figure class="col-6@xs col-12@sm col-3@md picture-item">
      <div class="aspect aspect--16x9">
        <div class="aspect__inner"><img src="https://picsum.photos/409?image=501" /></div>
      </div>
    </figure>
    <figure class="col-6@xs col-12@sm col-3@md picture-item">
      <div class="aspect aspect--16x9">
        <div class="aspect__inner"><img src="https://picsum.photos/409?image=502" /></div>
      </div>
    </figure>
    <figure class="col-6@xs col-12@sm col-3@md picture-item">
      <div class="aspect aspect--9x80">
        <div class="aspect__inner"><img src="https://picsum.photos/409?image=510" /></div>
      </div>
    </figure>
    <figure class="col-6@xs col-12@sm col-3@md picture-item">
      <div class="aspect aspect--16x9">
        <div class="aspect__inner"><img src="https://picsum.photos/409?image=503" /></div>
      </div>
    </figure>
  </div>
</div>

第四步js代码:

//document.querySelector('.my-shuffle')代表了my-shuffle元素中元素需要洗牌
//itemSelector代表元素需要洗牌
var Shuffle = window.Shuffle;
var myShuffle = new Shuffle(document.querySelector('.my-shuffle'), {
  itemSelector: '.picture-item',
  buffer: 1,
});