新竹網站架設

0愛的鼓勵 0訂閱站台

查看演示  下載檔案 扼要教程 sortableJs是一款帶排序功能的js masonry瀑布流插件。sortableJs可以或許使元素以卡片形式顯示，並以masonry瀑布流體式格局進行佈局，通過點擊分類按鈕，可以將卡片按指定的方式動態排序。網站架設 利用方式 在頁面中引入sortable.min.css和sortable.min.js文件。 <link rel="stylesheet" href="path/to/sortable.min.css"> <script src="path/to/sortable.min.js"></script>     複製代碼 HTML佈局 利用sortableJs的基本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>   網站架設 複製代碼 1、利用無序列表插件一組元素，每一個鏈接都添加一個data-sjslink屬性，指向要操作的分類元素。 2、將統一種類的元素包裹在data-sjsel屬性的塊級元素中。網站架設 3、將所有的塊級元包裹子啊sjs-default容器中，並指定一個id。 JavaScript 最後，在頁面DOM元素加載完畢以後，經由過程sortablejs()方法來初始化插件。網站架設   <script type="text/javascript">   document.querySelector('#sortable').sortablejs() </script> 複製代碼 該帶排序功能的js masonry瀑布流插件的github地址為：https://github.com/TristanBlg/sortableJs 文章出處：NetYea 網頁設計

引用自: