带排序功能的js masonry瀑布流插件
源码介绍
sortableJs是一款带排序功能的js masonry瀑布流插件。sortableJs能够使元素以卡片形式显示,并以masonry瀑布流方式进行布局,通过点击分类按钮,可以将卡片按指定的方式动态排序。
在页面中引入sortable.min.css和sortable.min.js文件。 使用sortableJs的基本HTML结构如下: 1、使用无序列表插件一组元素,每个链接都添加一个 2、将同一种类的元素包裹在 3、将所有的块级元包裹子啊 最后,在页面DOM元素加载完毕之后,通过 该带排序功能的js masonry瀑布流插件的github地址为:https://github.com/TristanBlg/sortableJs简要教程
使用方法
<link rel="stylesheet" href="path/to/sortable.min.css">
<script src="path/to/sortable.min.js"></script>
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>
data-sjslink
属性,指向要操作的分类元素。data-sjsel
属性的块级元素中。sjs-default
容器中,并指定一个id。 JavaScript
sortablejs()
方法来初始化插件。
<script type="text/javascript">
document.querySelector('#sortable').sortablejs()
</script>
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » 带排序功能的js masonry瀑布流插件
发表评论 取消回复