Html5添加圖片分類過濾特效插件教程

1、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>

2、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應用開發者提升收入，爲優質的應用提供應用交叉推廣、自主銷售、定向推廣等服務。