带排序功能的js masonry瀑布流插件

在线预览   下载

 

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

 

 使用方法

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

?

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

 HTML结构

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

< ul >   < li >     < a data-sjslink="food"> [...]       < li >     < a data-sjslink="development"> [...]           < div id="sortable" class="sjs-default">         < div data-sjsel="food"> [...]   < div data-sjsel="development"> [...]   < div data-sjsel="development"> [...]

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

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

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

 JavaScript

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

?

1