html分类效果图,HTML5图片组合归类效果

HTML5对处理一些简单的动画非常方便，比如移动、淡入淡出效果等。今天分享的这款HTML5图片组合归类特效就应用了HTML5的移动特效，当用户选择一个图片分类时，相关分类的图片就会移动到这个分类下面，并伴随着淡入淡出的移动动画，是一款效果很酷的HTML5图片处理应用。$(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);});});// Creating the "Everything" option in the menu:List('Everything',items);// Looping though the arrays in itemsByTags:$.each(itemsByTags,function(k,v){List(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 List function:$('#stage').quicksand(link.data('list').find('li'));e.preventDefault();});$('#filter a:first').click();function List(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');}});