1. 主题阁汉化首页
  2. 特效代码

带排序功能瀑布流 masonry 特效代码

sortableJs 是一个带排序功能的 js masonry 瀑布流插件,sortableJs 能够使元素以卡片形式显示,并以 masonry 瀑布流方式进行布局,通过点击分类按钮,可以将卡片按指定的方式动态排序。本代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,不支持 IE8 及以下浏览器,首选火狐浏览器。是一款不错的的特效插件,需要的朋友可以下载!希望大家喜欢!

sortableJs 是一个带排序功能的 js masonry 瀑布流插件,sortableJs 能够使元素以卡片形式显示,并以 masonry 瀑布流方式进行布局,通过点击分类按钮,可以将卡片按指定的方式动态排序。本代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,不支持 IE8 及以下浏览器,首选火狐浏览器。是一款不错的的特效插件,需要的朋友可以下载!希望大家喜欢!

使用方法:

  1. <!–  在页面中引入sortable.min.css和sortable.min.js文件。 –>
  2. <link rel=“stylesheet” href=“path/to/sortable.min.css”>
  3. <script src=“path/to/sortable.min.js”></script>

HTML 结构:

  1. <!– 1st step –>
  2. <ul>
  3.   <li>
  4.     <a data-sjslink=“food”> […] </a>
  5.   </li>
  6.   <li>
  7.     <a data-sjslink=“development”> […] </a>
  8.   </li>
  9. </ul>
  10. <!– 3st step –>
  11. <div id=“sortable” class=“sjs-default”>
  12.   <!– 2nd step –>
  13.   <div data-sjsel=“food”> […] </div>
  14.   <div data-sjsel=“development”> […] </div>
  15.   <div data-sjsel=“development”> […] </div>
  16. </div>

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

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

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

JavaScript:

  1. <!– 最后,在页面DOM元素加载完毕之后,通过sortablejs()方法来初始化插件。 –>
  2. <script type=“text/javascript”>
  3.   document.querySelector(‘#sortable’).sortablejs()
  4. </script>

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

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,如若转载,请注明出处:https://themege.net/1326.html。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

发表评论

登录后才能评论
联系我们

联系我们

在线咨询:点击这里给我发消息

邮件:themege@163.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
关注微信
分享本页
返回顶部