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

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

入门用法

1、筛选过滤

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

html

 divid=\"grid\"  div p 80 /p /div  div p 89 /p /div  div p 30 /p /div  div p 55 /p /div /div 

javascript

//全部$(\'#grid\').isotope({filter:\'*\'});//class中包含transition$(\'#grid\').isotope({filter:\'.transition\'});//class中包含metal$(\'#grid\').isotope({filter:\'.metal\'});//jQuery代码过滤$(\'#grid\').isotope({filter:function(){varnumber=$(this).find(\'.number\').text();returnparseInt(number,10) 50;}})

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

2、排序

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

html

 divid=\"grid\"  div data-category=\"transition\"  p 79 /p  h3 Au /h3  h2 Gold /h2  p 196.966569 /p  /div  div data-category=\"metalloid\"  p 51 /p  h3 Sb /h3  h2 Antimony /h2  p 121.76 /p  /div ... /div 

javascript

// 目标div中的子元素里 class 为 name 的值$(\'#grid\').isotope({ sortBy: \'name\' })// 目标div中的子元素里 class 为 number 的值$(\'#grid\').isotope({ sortBy: \'number\' })// 进阶$(\'#grid\').isotope({ // 定义data getSortData: { category: \'[data-category]\', // 指目标div中的attribute的值，例如前面html里的 data-category=\"metalloid\" number: \'.number\' //目标div中的子元素里 class 为 number 的值 }, // 排序 sortBy: number, // 按照某个data排序，也支持多个，写作 sortBy:[number, category], // 是否升序 true or false sortAscending: false});

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

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