iostope用法示例之过滤篇

isotope的基本用法

Filter

selectors

过滤项目的最简单方法是使用选择器

<div class="grid">
<div class="item-one"></div>
<div class="item-two"></div>
<div class="item-three"></div>
</div>

<script>
var $grid = $('.grid');
$gri.isotope(filter:'.item-one')  /*选中类为item-one的元素，其余的都隐藏*/
$grid.isotope(filter:'.item-one,.item-two')/*两项都选中，都显示，其余的隐藏*/
$grid.isotope(filter:'*')/*选中类grid下的全部元素，并设为显示*/
</script>

Functions

您可以使用功能进行过滤

<div class="grid">
<div class="item-one number">88</div>
<div class="item-two number">23</div>
<div class="item-three number">123</div>
</div>
<script>
var $grid = $('.grid');
$grid.isotope({
filter:function(){
var number = $(this).filter('.number').text();
/*这个我想着就是上说的find()方法，这里得用filter()求吊大的指点一下*/[官方文档](https://isotope.metafizzy.co/filtering.html)
return parseInt(number,10)>50;
/*过滤出数字大于50的元素项进行显示*/
}
})
</script>
<!-- no use jquery  -->
<script>
iso.arrange({
filter:function(itemElem){
var number = itemElem.querySelector(.number').innerText;
return parseInt(number,10)>50
}
})
</script>
``

UI

UI是我们经常使用的,所以又想用这个插件的同学请多看看这一部分哦。

<div class="button-group">
<button data-filter="*">show all</button>
<button data-filter=".item-one">show one</button>
<button data-filter=".item-one .item-two">show two</button>
</div>
<div>
<div class="item-one">one</div>
<div class="item-two">two</div>
<div class="item-three">three</div>
</div>
<script>
var $grid = $('.grid').isotope({
// options  进行初始化
});
$('.button-group').on(''click','button',function{
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
})
</script>

Filter Functions

与上一个functions 不同的是,这个是对数据处理过后，再用filter过滤

<div class="button-group">
<button data-filter="numberGreaterThan50">number > 50</button>

4000
<button data-filter="ium">name ends with -ium</button>
</div>
<div class="grid">
<div class="number">99</div>
<div class="name">22222ium</div>
</div>
<script>
var $grid = $('.grid').isotope({});
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function () {
var number = $(this).filter('.number').html();
console.log(this)
return parseInt(number, 10) > 50;
},
// show if name ends with -ium
ium: function () {
var name = $(this).filter('.name').text();
return name.match(/ium$/);
}
};

// filter items on button click
$('.button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
// use filter function if value matches
filterValue = filterFns[filterValue] || filterValue;
$grid.isotope({ filter: filterValue });
});
</script>

Sorting

用于对元素更详尽的过滤操作

<div class="grid">
<div class="element-item transition metal" data-category="transition">
<p class="number">79</p>
<h3 class="symbol">Au</h3>
<h2 class="name">Gold</h2>
<p class="weight">196.966569</p>
</div>
<div class="element-item metalloid" data-category="metalloid">
<p class="number">51</p>
<h3 class="symbol">Sb</h3>
<h2 class="name">Antimony</h2>
<p class="weight">121.76</p>
</div>
</div>
<!-- 以上每个div项目中都有几个可排序的数据点-->
<script>
var $grid = $('.grid').isotope({
getSortData: {
name: '.name',
symbol: '.symbol',
number: '.number parseInt',
category: '[data-category]',
weight: function( itemElem ) {
var weight = $( itemElem ).find('.weight').text();
return parseFloat( weight.replace( /[\(\)]/g, '') );
}
}
/*对象的键使用用于排序的关键字。对象值是用于检索数据的快捷方式字符串或函数
一：name:'.name',该字符串将被用作查询选择器
二：category:'[data-category]',用来获取属性的值
三：number:'.number parseInt'通过向快捷方式字符串中添加解析器关键字，数据值可以解析成数字
四：getSortData函数,如上面的weight函数此功能用于每个项目元素以获取数据。该函数提供了一个参数itemElem，它是item元素。该函数需要返回数据点。
*/
});

// sort items on button click
$('.sort-by-button-group').on( 'click', 'button', function() {
var sortByValue = $(this).attr('data-sort-by');
$grid.isotope({ sortBy: sortByValue });
});
/*排序方式，对于每个设置的属性getSortData,isotope都可以使用该sortBy选项进行排序,sortBy可以设置为以上'name','symbol'
ps：如果想进行多重分类，就将sortBy()设置为数据，这样就可以进行多重分类*/
</script>

sortAscending

这个选项用来设置升序还是排序

默认情况下,是升序的，若是想降序，需要将sortAscending设置为sortAscending:false也可以设置每个sortBy值设置升序

$grid.isotope({
sortAscending: {
name: true,
weight: false,
category: true,
number: false
}
});

updateSortData

要在对项目元素进行更改后更新排序数据，请使用该updateSortData方法。

$grid.isotope('updateSortData').isotope();

以下有两个例子，分别是filer和sorting，我把这个例子放到git上，有意者可以上git上下载查看学习。

传送门，如果对你有帮助，别忘记点赞哦

其下的就是利用isotope进行layout方面的操作，等过两天有空再把isotope使用姿势（2）更新出来吧。

　　谢谢大家观看，如有bug，请指正出来，共同进步。