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

一、Html结构

• 

• 

• 

二、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 = $('

• ',{'class':'hidden'});

$.each(items,function(){

$(this).clone().appendTo(ul);

});

ul.appendTo('#container');

var 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应用开发者提高收入，为优质的应用提供应用交叉推广、自主销售、定向推广等服务。