Quicksand-jQuery超酷图片分类插件

Quicksand是一款使用 jQuery 和 html5 制作的超酷图片分类插件。

HTML结构

Quicksand会将一个列表项替换为另一个列表项。你需要做的就是提供两个列表。可以通过下面的几种方式来提供列表：

• 可以使用普通的HTML列表，如一个无序列表。
• 可以通过AJAX回调来添加一个列表。
• 通过javascript来改变原来的列表（例如重新排列它们）。

<ul id="source">
  <li data-id="iphone">iOS</li>
  <li data-id="android">Android</li>
  <li data-id="winmo">Windows Phone 7</li>
</ul>

<ul id="destination" class="hidden">
  <li data-id="macosx">Mac OS X</li>
  <li data-id="macos9">Mac OS 9</li>
  <li data-id="iphone">iOS</li>
</ul>
                

第一个列表source是用户可见的列表，第二个列表是用于替换的列表。

你需要在列表项中使用HTML5 data-id 属性来描述同类元素以将它们进行分类。两个相同的data-id表示它们是同一个分类的元素。

javascript

然后就可以通过下面的代码来调用Quicksand。

$('#source').quicksand( $('#destination li') );
                

你可以为Quicksand添加回调函数：

$('#source').quicksand( $('#destination li'), function() {
  // callback code
});
                

关于CSS样式的一些建议

• 1、当你在为列表项和它们的内容添加样式的时候，使用ID选择符可能会导致一些奇怪的结果。Quicksand通过克隆来模拟动画帧效果。由于可能两个元素会有同样的ID存在，所以应该避免使用ID选择符来编写样式。
• 2、Quicksand需要知道 body和容器及列表项之间的 margin。如果这些元素有它们自己的margins，请使用px(像素)为单位，不要使用ems。该插件目前不能理解em单位。

可用参数

你可以通过下面的参数修改Quicksand。调用参数的格式如下：

$('#source').quicksand( $('#destination li'), {
  name: value
});
                

或者

$('#source').quicksand( $('#destination li'), {
  name: value
}, function() {
  // callback code
});
                

集成其它插件

当你在列表项上使用其它一些插件功能（例如tooltips）时，请记住要使用回调函数来在新的复制元素上来使用它们。

$("#content").quicksand($("#data > li"), 
  {
    duration: 1000,
  }, function() { // callback function
    $('#content a').tooltip();
  }
);
                

当你在项目中使用了一些视觉增强功能（例如：替换字体）时，要在图片分类动画时使用enhancement来刷新和应用这些效果。

$("#content").quicksand($("#data > li"), 
  {
    duration: 1000,
    enhancement: function() {
      Cufon.refresh('#content span');
    }
  }
);
                

更详细的图片分类教程请参考：http://razorjack.net/quicksand/index.html