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
});
参数名称 默认值 描述
adjustHeight 'auto' 调整容器的高度来适应所有的列表项。'auto'为在图片分类动画前或图片分类动画后自动调整。'dynamic'为动态调整。设置为false则保持容器的高度不变。
adjustWidth 'auto' 调整容器的宽度来适应所有的列表项。'auto'为在图片分类动画前或图片分类动画后自动调整。'dynamic'为动态调整。设置为false则保持容器的宽度不变。
attribute 'data-id' 该属性用于匹配集合中的列表项。你可以提供自定义函数来获取唯一的值。
duration 750 动画持续时间，单位毫秒。
easing 'swing' 动画的Easing效果。可以在这里查看更多的jquery easing 插件的选项。
enhancement function() {} 如果你想集成一些视觉增强功能（例如：替换文本），可以指定一个函数来为列表项在图片分类动画时应用它们。
useScaling false 是否使用 CSS3 缩放动画。如果你需要缩放图片的动画效果，需要添加这个插件。
retainExisting true 默认情况下，Quicksand是重用已经存在的DOM元素而不是替换它们（1.3版本后已经更新）。设置该参数为false来强制在图片分类动画结束时替换和刷新它们。这个参数在大多数情况下是必须的。
maxWidth 0 隐藏所有CSS属性大于这个值的元素。设置为0关闭这个功能。
atomic false 设置该参数为true会使DOM元素立刻交换。设置为false将会使图片分类动画有一些延时，但是如果你想在动画时修改DOM元素，建议设置为false。

集成其它插件

当你在列表项上使用其它一些插件功能（例如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