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

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

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

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

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

第二步导入js:

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

第三步html代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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代码:

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

文件信息:

    0

    发表评论