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

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

查看演示  下載檔案


扼要教程
sortableJs是一款帶排序功能的js masonry瀑布流插件。sortableJs可以或許使元素以卡片情勢顯示，並以masonry瀑布流體式格局進行結構，通過點擊分類按鈕，可以將卡片按指定的體例動態排序。

使用方式
在頁面中引入sortable.min.css和sortable.min.js文件。
  1. <link rel="stylesheet" href="path/to/sortable.min.css">
  2. <script src="path/to/sortable.min.js"></script>  
  3.  
複製代碼

HTML構造
使用sortableJs的根基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.  
  11. <!-- 3st step -->
  12. <div id="sortable" class="sjs-default">
  13.  
  14.   <!-- 2nd step -->
  15.   <div data-sjsel="food"> [...] </div>
  16.   <div data-sjsel="development"> [...] </div>
  17.   <div data-sjsel="development"> [...] </div>
  18. </div>  
複製代碼

1、使用無序列表插件一組元素，每一個鏈接都添加一個data-sjslink屬性，指向要操作的分類元素。

2、將統一種類的元素包裹在data-sjsel屬性的塊級元素中。

3、將所有的塊級元包裹子啊sjs-default容器中，並指定一個id。

JavaScript
最後，在頁面DOM元素加載終了以後，經由過程sortablejs()方式來初始化插件。
 
  1. <script type="text/javascript">
  2.   document.querySelector('#sortable').sortablejs()
  3. </script>
複製代碼

該帶排序功能的js masonry瀑布流插件的github地址為：https://github.com/TristanBlg/sortableJs

文章出處：NetYea 網頁設計


本文出自:
arrow
arrow
    文章標籤
    網頁設計
    全站熱搜
    創作者介紹
    創作者 zolanddelbs 的頭像
    zolanddelbs

    苗栗網頁設計

    zolanddelbs 發表在 痞客邦 留言(0) 人氣()