官网地址: https://isotope.metafizzy.co/

项目中的效果: https://chrome.zzzmh.cn/



入门用法

1、筛选过滤

(官网例子: https://isotope.metafizzy.co/filtering.html

html

  1. <div id="grid">
  2.   <div class="element-item transition metal"><p class="number">80</p></div>
  3.   <div class="element-item post-transition metal"><p class="number">89</p></div>
  4.   <div class="element-item alkali metal"><p class="number">30</p></div>
  5.   <div class="element-item transition metal"><p class="number">55</p></div>
  6. </div>


javascript

  1. // 全部
  2. $('#grid').isotope({ filter: '*' });
  3. // class 中包含 transition
  4. $('#grid').isotope({ filter: '.transition' });
  5. // class 中包含 metal
  6. $('#grid').isotope({ filter: '.metal' });
  7.  
  8. // jQuery 代码过滤
  9. $('#grid').isotope({
  10.   filter: function() {
  11.     var number = $(this).find('.number').text();
  12.     return parseInt( number, 10 ) > 50;
  13.   }
  14. })


在我的项目中的效果 : (在线地址: https://chrome.zzzmh.cn/)


2、排序

(官网例子 https://isotope.metafizzy.co/sorting.html

html

  1. <div id="grid">
  2.   <div class="element-item transition metal" data-category="transition">
  3.     <p class="number">79</p>
  4.     <h3 class="symbol">Au</h3>
  5.     <h2 class="name">Gold</h2>
  6.     <p class="weight">196.966569</p>
  7.   </div>
  8.   <div class="element-item metalloid" data-category="metalloid">
  9.     <p class="number">51</p>
  10.     <h3 class="symbol">Sb</h3>
  11.     <h2 class="name">Antimony</h2>
  12.     <p class="weight">121.76</p>
  13.   </div>
  14.   ...
  15. </div>


javascript

  1. // 目标div中的子元素里 class 为 name 的值
  2. $('#grid').isotope({ sortBy: 'name' })
  3. // 目标div中的子元素里 class 为 number 的值
  4. $('#grid').isotope({ sortBy: 'number' })
  5.  
  6. // 进阶
  7. $('#grid').isotope({
  8. // 定义data
  9. getSortData: {
  10. category: '[data-category]', // 指目标div中的attribute的值,例如前面html里的 data-category="metalloid"
  11. number: '.number' //目标div中的子元素里 class 为 number 的值
  12. },
  13. // 排序
  14. sortBy: number, // 按照某个data排序,也支持多个,写作 sortBy:[number, category],
  15. // 是否升序 true or false
  16. sortAscending: false
  17. });


在我的项目中的效果 : (在线地址: https://chrome.zzzmh.cn/)


入门功能就是这些,进阶功能建议访问官网查看: https://isotope.metafizzy.co