Html5添加图片分类过滤特效插件教程

一、Html结构
<ul id="stage">
<li data-tags="Print Design">
<img src="assets/img/shots/1.jpg" />
</li>
 
<li data-tags="Logo Design,Print Design">
<img src="assets/img/shots/2.jpg" />
</li>
 
<li data-tags="Web Design,Logo Design">
<img src="assets/img/shots/3.jpg" />
</li>
</ul>

二、JQuery代码
这款插件中还集成了另一个jQuery插件-Quicksand 。它用于比较两个列表的列表项，然后在它们当中找到匹配的列表项，并将它们移动到新的位置上。我们首先要循环id为#stage的无序列表，并创建一个隐藏的无序列表来存放找到的匹配列表项。同时也会创建一个菜单项用于触发两个列表之间的quicksand动画。
$(document).ready(function(){
var items = $('#stage li'),
itemsByTags = {};
items.each(function(i){
var elem = $(this),
tags = elem.data('tags').split(',');
elem.attr('data-id',i);
$.each(tags,function(key,value){
value = $.trim(value);
if(!(value in itemsByTags)){
itemsByTags[value] = [];
        }
itemsByTags[value].push(elem);
    });
});

每一个找到的项都被放入到itemsByTags对象数组中。这意味着itemsByTags['Web Design']将会保存所有data属性中带有Web Design的列表项。我们将使用这个对象来为quicksand创建隐藏的无序列表。

最好是创建一个辅助函数来帮助我们创建隐藏列表：
function createList(text,items){
var ul = $('<ul>',{'class':'hidden'});
$.each(items,function(){
$(this).clone().appendTo(ul);
    });
ul.appendTo('#container');
var a = $('<a>',{
html: text,
href:'#',
data: {list:ul}
    }).appendTo('#filter');
}
这个辅助函数使用组的名称和列表项数组作为参数。然后它将这些列表项复制到一个新的列表中，并将它链接到菜单项上面。

有了这个辅助函数，现在我们可以循环所有的组，然后使用该函数完成相应的动作，并监听菜单的click事件。
createList('Everything',items);
$.each(itemsByTags,function(k,v){
createList(k,v);
});
$('#filter a').live('click',function(e){
var link = $(this);
link.addClass('active').siblings().removeClass('active');
$('#stage').quicksand(link.data('list').find('li'));
e.preventDefault();
});
$('#filter a:first').click();

KeyMob移动广告优化平台是国内专一的优化平台，具有强大的技术支持与优秀的服务，并且还拥有优质的资源以及稳定的ＳＤＫ，为Android、IOS应用开发者提高收入，为优质的应用提供应用交叉推广、自主销售、定向推广等服务。