sortableJs是一个具有排序功能的js砌体瀑布插件。 sortableJs使元素能够显示为卡片并布置在砖石瀑布流中。通过单击排序按钮，可以以指定的方式动态地对卡进行排序。

使用方法

在页面中引入sortable.min.css和sortable.min.js文件。

<link rel="stylesheet" href="path/to/sortable.min.css">
<script src="path/to/sortable.min.js"></script> 

HTML结构

使用sortableJs的基本HTML结构如下：

<!-- 1st step -->
<ul>
  <li>
    <a data-sjslink="food"> [...] </a>
  </li>
  <li>
    <a data-sjslink="development"> [...] </a>
  </li>
</ul>

<!-- 3st step -->
<div id="sortable" class="sjs-default">
  <!-- 2nd step -->
  <div data-sjsel="food"> [...] </div>
  <div data-sjsel="development"> [...] </div>
  <div data-sjsel="development"> [...] </div>
</div>

1、使用无序列表插件一组元素，每个链接都添加一个data-sjslink属性，指向要操作的分类元素。
2、将同一种类的元素包裹在data-sjsel属性的块级元素中。
3、将所有的块级元包裹子啊sjs-default容器中，并指定一个id。

JavaScript

最后，在页面DOM元素加载完毕之后，通过sortablejs()方法来初始化插件。

<script type="text/javascript">
  document.querySelector('#sortable').sortablejs()
</script>

源码来源：https://github.com/TristanBlg/sortableJs

在线预览 网盘下载