jquery实现点击排序按钮，图标自动排列的特效

特效介绍

使用方法

<UL class=splitter>
  <LI>Filter by type:
  <UL>
    <LI class="segment-1 selected-1"><A
    href="#"
    data-value="all">Everything</A></LI>
    <LI class=segment-0><A href="#"
    data-value="app">Applications</A></LI>
    <LI class=segment-2><A href="#"
    data-value="util">Utilities</A></LI></UL></LI>
  <LI>Sort by:
  <UL>
    <LI class="segment-1 selected-1"><A
    href="#"
    data-value="name">Name</A></LI>
    <LI class=segment-2><A href="#"
    data-value="size">Size</A></LI></UL></LI></UL>
<DIV class=demo><!-- read the documentation to understand what’s going on here -->
<UL id=list class=image-grid>
  <LI class=util data-id="id-1"><IMG alt=""
  src="images/activity-monitor.png" width=128
  height=128> <STRONG>Activity Monitor</STRONG> <SPAN>348 KB</SPAN> </LI>
  <LI class=app data-id="id-2"><IMG alt=""
  src="images/address-book.png" width=128 height=128>
  <STRONG>Address Book</STRONG><SPAN>1904 KB</SPAN> </LI>
  <LI class=app data-id="id-3"><IMG alt=""
  src="images/finder.png" width=128 height=128>
  <STRONG>Finder</STRONG> <SPAN>1337 KB</SPAN> </LI>
  <LI class=app data-id="id-4"><IMG alt=""
  src="images/front-row.png" width=128 height=128>
  <STRONG>Front Row</STRONG> <SPAN>401 KB</SPAN> </LI>
  <LI class=app data-id="id-5"><IMG alt=""
  src="images/google-pokemon.png" width=128
  height=128> <STRONG>Google Pokémon</STRONG> <SPAN>12875 KB</SPAN> </LI>
  <LI class=app data-id="id-6"><IMG alt=""
  src="images/ical.png" width=128 height=128>
  <STRONG>iCal</STRONG> <SPAN>5273 KB</SPAN> </LI>
  <LI class=app data-id="id-7"><IMG alt=""
  src="images/ichat.png" width=128 height=128>
  <STRONG>iChat</STRONG> <SPAN>5437 KB</SPAN> </LI>
  <LI class=app data-id="id-8"><IMG alt=""
  src="images/interface-builder.png" width=128
  height=128> <STRONG>Interface Builder</STRONG> <SPAN>2764 KB</SPAN> </LI>
  <LI class=app data-id="id-9"><IMG alt=""
  src="images/ituna.png" width=128 height=128>
  <STRONG>iTuna</STRONG> <SPAN>17612 KB</SPAN> </LI>
  <LI class=util data-id="id-10"><IMG alt=""
  src="images/keychain-access.png" width=128
  height=128> <STRONG>Keychain Access</STRONG> <SPAN>972 KB</SPAN> </LI>
  <LI class=util data-id="id-11"><IMG alt=""
  src="images/network-utility.png" width=128
  height=128> <STRONG>Network Utility</STRONG> <SPAN>245 KB</SPAN> </LI>
  <LI class=util data-id="id-12"><IMG alt=""
  src="images/sync.png" width=128 height=128>
  <STRONG>Sync</STRONG> <SPAN>3788 KB</SPAN> </LI>
  <LI class=app data-id="id-13"><IMG alt=""
  src="images/textedit.png" width=128 height=128>
  <STRONG>TextEdit</STRONG> <SPAN>1669 KB</SPAN> </LI></UL></DIV>