html分类效果图,html5图片分类过滤特效插件

这是一款使用 html5和 jQuery 制作的非常实用的图片分类过滤特效插件。

HTML结构

html结构使用的是一个无序列表来制作图片画廊,给它一个id #stage。雷一个列表元素都带有一个 HTML5 data 属性,该属性的值可以使用逗号来分割一系列的值。在后面我们会用jQuery来循环这些列表项,然后记录这些值,并用它们来做为图片分类的依据。

  • 1.jpg

  • 2.jpg

  • 3.jpg

...

jQuery代码

这款插件中还集成了另一个jQuery插件-Quicksand 。它用于比较两个列表的列表项,然后在它们当中找到匹配的列表项,并将它们移动到新的位置上。我们首先要循环id为#stage的无序列表,并创建一个隐藏的无序列表来存放找到的匹配列表项。同时也会创建一个菜单项用于触发两个列表之间的quicksand动画。

$(document).ready(function(){

var items = $('#stage li'),

itemsByTags = {};

// Looping though all the li items:

items.each(function(i){

var elem = $(this),

tags = elem.data('tags').split(',');

// Adding a data-id attribute. Required by the Quicksand plugin:

elem.attr('data-id',i);

$.each(tags,function(key,value){

// Removing extra whitespace:

value = $.trim(value);

if(!(value in itemsByTags)){

// Create an empty array to hold this item:

itemsByTags[value] = [];

}

// Each item is added to one array per tag:

itemsByTags[value].push(elem);

});

});

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

最好是创建一个辅助函数来帮助我们创建隐藏列表:

function createList(text,items){

// This is a helper function that takes the

// text of a menu button and array of li items

// Creating an empty unordered list:

var ul = $('

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

$.each(items,function(){

// Creating a copy of each li item

// and adding it to the list:

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

});

ul.appendTo('#container');

// Creating a menu item. The unordered list is added

// as a data parameter (available via .data('list')):

var a = $('',{

html: text,

href:'#',

data: {list:ul}

}).appendTo('#filter');

}

这个辅助函数使用组的名称和列表项数组作为参数。然后它将这些列表项复制到一个新的列表中,并将它链接到菜单项上面。

有了这个辅助函数,现在我们可以循环所有的组,然后使用该函数完成相应的动作,并监听菜单的click事件。

// Creating the "Everything" option in the menu:

createList('Everything',items);

// Looping though the arrays in itemsByTags:

$.each(itemsByTags,function(k,v){

createList(k,v);

});

$('#filter a').live('click',function(e){

var link = $(this);

link.addClass('active').siblings().removeClass('active');

// Using the Quicksand plugin to animate the li items.

// It uses data('list') defined by our createList function:

$('#stage').quicksand(link.data('list').find('li'));

e.preventDefault();

});

// Selecting the first menu item by default:

$('#filter a:first').click();

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值