isolde.js是一款带过滤网格数据分组的瀑布流插件-BFW插件库

isolde.js是一款带过滤网格数据分组的瀑布流插件

isolde.js是一款带过滤网格数据分组的瀑布流插件。

安装

npm

npm i isolde --save

cdn

//repo.bfw.wiki/bfwrepo/js/isolde.js

使用方式：

1、引入js和css

import isolde from 'isolde';
import 'isolde/dist/isolde.min.css';

或者<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/isolde.css">
<script type="module">
import isolde from '//repo.bfw.wiki/bfwrepo/js/isolde.js';
const isoldejs = new isolde();
</script>

2、设置dom，通过data-isolde-el来分组。

<div id="isolde" class="isolde-default">
  <div data-isolde-el="javascript">
    Item 1
  </div>
  <div data-isolde-el="css">
    Item 2
  </div>
  <div data-isolde-ell="html">
    Item 3
  </div>
  <div data-isolde-el="css">
    Item 4
  </div>
  <div data-isolde-el="javascript">
    Item 5
  </div>
  ...
</div>

3、创建分组导航条

<ul>
  <li>
    <a data-isolde-link="javascript">JavaScript</a>
  </li>
  <li>
    <a data-isolde-link="css">CSS</a>
  </li>
  <li>
    <a data-isolde-link="html">HTML</a>
  </li>
</ul>

4、初始化

const isoldejs = new isolde();

或者自定义参数

const isoldejs = new isolde({
      // parent element
       parent:  document.querySelector('#isolde'),
      // filter links
      links: document.querySelectorAll('[data-isolde-link]'),
      // active class
      active: 'is-active',
      // in pixels
      margin: 20,
      // for responsive
      responsive: {
        980: {
          columns: 3
        },
        480: {
          columns: 2
        },
        0: {
          columns: 1
        }
      },
      // fade in/out duration
      fadeDuration:{
        in: 300,
        out: 0
      }
  
});

完整代码

<html lang="en-us">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/isolde.css">


</head>

<body>
    <ul>
        <li>
            <a data-isolde-link="javascript">JavaScript</a>
        </li>
        <li>
            <a data-isolde-link="css">CSS</a>
        </li>
        <li>
            <a data-isolde-link="html">HTML</a>
        </li>
    </ul>
    <div id="isolde" class="isolde-default">
        <div data-isolde-el="javascript">
            Item 1
        </div>
        <div data-isolde-el="css">
            Item 2
        </div>
        <div data-isolde-ell="html">
            Item 3
        </div>
        <div data-isolde-el="css">
            Item 4
        </div>
        <div data-isolde-el="javascript">
            Item 5
        </div>

    </div>

    <script type="module">
        import isolde from '//repo.bfw.wiki/bfwrepo/js/isolde.js'; const isoldejs = new isolde();
    </script>

</body>

</html>