当前位置:JS特效 » 瀑布流插件 » 带排序功能的js masonry瀑布流插件
 带排序功能的js masonry瀑布流插件
如果您觉得内容不错,请分享:

插件介绍

sortableJs是一款带排序功能的jsmasonry瀑布流插件。sortableJs能够使元素以卡片形式显示,并以masonry瀑布流方式进行布局,通过点击分类按钮,可以将卡片按指定的方式动态排序。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:131
简要教程

sortableJs是一款带排序功能的js masonry瀑布流插件。sortableJs能够使元素以卡片形式显示,并以masonry瀑布流方式进行布局,通过点击分类按钮,可以将卡片按指定的方式动态排序。

使用方法

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


  
                
HTML结构

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





[...]
[...]
[...]

1、使用无序列表插件一组元素,每个链接都添加一个data-sjslink属性,指向要操作的分类元素。

2、将同一种类的元素包裹在data-sjsel属性的块级元素中。

3、将所有的块级元包裹子啊sjs-default容器中,并指定一个id。

JavaScript

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


                

该带排序功能的js masonry瀑布流插件的github地址为:https://github.com/TristanBlg/sortableJs

Top