今天我要跟大家分享的是一款带有排序功能的瀑布流插件【sortableJs】
它是一款带排序功能的js masonry瀑布流插件。它能够使元素以卡片形式显示，并以masonry瀑布流方式进行布局，通过点击分类按钮，可以将卡片按指定的方式动态排序。该插件的github地址为：https://github.com/TristanBlg/sortableJs演示截图：
image
一、插件使用方法
在页面中引入sortable.min.css和sortable.min.js文件。
<link rel="stylesheet" href="./demo/sortable.min.css">
<script src="./demo/sortable.min.js"></script>
二、HTML结构
使用sortableJs的基本HTML结构如下：
<ul>
<li>
<a data-sjslink="food"> [...] </a>
</li>
<li>
<a data-sjslink="development"> [...] </a>
</li>
</ul>
<div id="sortable" class="sjs-default">
<div data-sjsel="food"> [...] </div>
<div data-sjsel="development"> [...] </div>
<div data-sjsel="development"> [...] </div>
</div>
2、将同一种类的元素包裹在data-sjsel属性的块级元素中。1、使用无序列表插件一组元素，每个链接都添加一个data-sjslink属性，指向要操作的分类元素。
3、将所有的块级元包裹子啊sjs-default容器中，并指定一个id。
三、初始化插件
最后，在页面DOM元素加载完毕之后，通过sortablejs()方法来初始化插件。
<script type="text/javascript">
document.querySelector('#sortable').sortablejs()
</script>
四、完整的HTML页面代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一款带排序功能的瀑布流插件|DEMO_web前端开发_专注web前端领域的学习与优质资源的分享</title>
<link rel="stylesheet" type="text/css" href="css/web-demo.css">
<link rel="stylesheet" href="./css/main.css">
<link href="https://fonts.googleapis.com/css?family=Hind:400,600|Open+Sans:300,600" rel="stylesheet">
<link rel="stylesheet" href="./demo/sortable.min.css">
<script type="text/javascript" src="./demo/sortable.min.js"></script>
</head>
<body>
<div class="web-container">
<header class="web-header">
<h1>一款带排序功能的瀑布流插件 <span>web前端开发-www.webqdkf.com</span></h1>
<div class="web-links">
<a class="web-icon icon-web-home-outline" href="http://www.webqdkf.com/" title="web前端开发" target="_blank"><span> web前端开发</span></a>
<a class="web-icon icon-web-arrow-forward-outline" href="http://www.webqdkf.com/qdkf/js/2019-10-19/485.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<main class="sortable">
<div class="container">
<div class="wrapper">
<ul class="sortable__nav nav">
<li>
<a data-sjslink="all" class="nav__link">
全部
</a>
</li>
<li>
<a data-sjslink="flatty" class="nav__link">
双数
</a>
</li>
<li>
<a data-sjslink="funny" class="nav__link">
单数
</a>
</li>
</ul>
<div id="sortable" class="sjs-default">
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-1.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 01</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-2.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 02</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-3.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 03</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-4.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 04</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-5.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 05</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-6.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 06</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-7.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 07</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-8.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 08</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-9.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 09</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-10.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 10</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-11.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 11</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-12.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 12</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-13.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 13</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-14.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 14</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-15.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 15</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-16.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 16</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-17.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 17</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-18.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 18</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-19.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 19</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-20.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 20</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-21.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 21</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-22.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 22</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-23.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 23</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-24.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 24</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-25.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 25</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-26.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 26</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-27.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">设计8号工作室出品 27</h2>
<p class="card__text">
【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script type="text/javascript">
document.querySelector('#sortable').sortablejs()
</script>
</body>
</html>
网友评论