點選上面這張圖片就可以看到效果~
這是最近在練習的一個清單排序效果，
主要可以應用在相簿、icon 或是一些排序篩選上，
當中也使用了類似 JSON 的寫法，
這樣一來不僅可以結合 AJAX，
再修改上也更為直覺方便~
其實這個效果的重點在於"定位"
在做清單排序的時候，
除了讓清單根據寬度大小而自動換行之外，
也可使用絕對位置，
再用迴圈的方式把每個清單固定到該有的位置上，
而這個效果，就是要建立一個透明的清單，
讓要排序的清單定位上有個準確的依據，
就可以達成相關的定位效果了~
此外還有一個重點，也就是如何篩選，
篩選的原裡我想跟文章的標籤有異曲同工之妙，
就是標籤上除了可以自定義標籤，
再使用 selector[attr=tagname] 的方式來達成，
也可以使用多個 class 的方式排判別，
也就是將標籤寫入 class 內，
再利用 selector 來判斷哪些標籤該出現哪些該消失，
就可以輕鬆達成篩選了~
下面是主要的程式碼參考
在做清單排序的時候，
除了讓清單根據寬度大小而自動換行之外，
也可使用絕對位置，
再用迴圈的方式把每個清單固定到該有的位置上，
而這個效果，就是要建立一個透明的清單，
讓要排序的清單定位上有個準確的依據，
就可以達成相關的定位效果了~
此外還有一個重點，也就是如何篩選，
篩選的原裡我想跟文章的標籤有異曲同工之妙，
就是標籤上除了可以自定義標籤，
再使用 selector[attr=tagname] 的方式來達成，
也可以使用多個 class 的方式排判別，
也就是將標籤寫入 class 內，
再利用 selector 來判斷哪些標籤該出現哪些該消失，
就可以輕鬆達成篩選了~
下面是主要的程式碼參考
function boxTag(tag){
clearTimeout(timer);
$("#u3").remove();
drawList($("#u2 li."+tag).length);
$("#u2 li").not("#u2 li."+tag).fadeOut(300);
for(var i=0; i<$("#u2 li."+tag).length; i++){
$("#u2 li."+tag+":eq("+i+")").animate({
"top":$('#u3 li:eq('+i+')').offset().top-$('#div1').offset().top-div1Style.divborderWidth,
"left":$('#u3 li:eq('+i+')').offset().left-$('#div1').offset().left-div1Style.divborderWidth
},{queue:false,duration:300});
}
timer=setTimeout(function(){$("#u2 li."+tag).fadeIn(300);},150);
}
沒有留言:
張貼留言