Quicksand 插件入门介绍

1.插件介绍

JS的插件丰富多样，今天试用了一款叫做Quicksand的插件，发现其使用方法虽然简单，但展现出来的洗牌特效却让人眼前一亮。下面就简要介绍一下这个插件的使用方法。
此插件的官网地址：Quicksand（此插件依赖于JQuery，因此在使用该插件时，务必在其之前引入JQuery插件）

2.使用方法

该插件的调用方法非常简洁，仅一句代码：

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

基本的工作原理就是用一个列表的项替换另一个列表的项。
参数：
$('#source')是用JQuery选取的源对象（被替换的），其是一个列表元素（如<ul>)；
$('#destination li')是用JQuery选取的目标对象（要新插入的的列表项），其是一组列表项元素（如<li>)；
{params}是一系列可选的参数，省略时使用默认参数，主要包括：

{
    attribute:'data-id',   //用于列表项的关联属性,默认为data-id
    duration:750,          //动画的持续时间，单位为毫秒，默认为750
    easing:'swing',        //动画的缓冲方式，默认为swing
    adjustHeight:'auto',   //自动调整动画前后，列表项容器的高度，默认为auto，false表示关闭
    adjustWidth:'auto',    //自动调整动画前后，列表项容器的宽度，默认为auto，false表示关闭
    atomic:false,          //设置为true时则立刻交换元素，默认为false
    enhancement:function(){},  //加强动画效果函数
    useScaling:false,      //是否使用CSS3的转换动画的比例，默认不使用
    retainExisting:true    //默认为true时，表示quicksand操作DOM元素时，只是回收再利用而不是替换掉他们，为false时，则quicksand用新的元素替换旧的。
}

3.使用例子

这个例子展示了简单的分类动画，列表总包含10个子项，分别对应数字1-10，分类按钮包含三项，分别为所有数字、2的倍数、3的倍数。当点击所有数字的按钮时，屏幕显示所有数字块。而当点击2的倍数或3的倍数的按钮时，则只显示对应的数字块。

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>演示</title>
        <style type="text/css">
            .webbies li {
              display: block;
              margin: 10px;
              float: left;
              width:100px;
              height:100px;
              font-size:20px;
              color:white;
              font-weight:bold;
            }
            .webbies{
                width:60%;
            }
        </style>
    </head>
    <body>
        <div class="demo">
          <p id="load-webbies">    //分类按钮
            <a id="all" class="button" href="#">所有数字</a>
            <a id="2B" class="button" href="#">2的倍数</a>
            <a id="3B" class="button" href="#">3的倍数</a>
          </p>
          <ul class="webbies">   //列表项
            <li data-id="1" style="background-color:green">1</li>
            <li class="2B" data-id="2" style="background-color:red">2</li>
            <li class="3B" data-id="3" style="background-color:yellow">3</li>
            <li class="2B" data-id="4" style="background-color:blue">4</li>
            <li data-id="5" style="background-color:black">5</li>
            <li class="2B 3B" data-id="6" style="background-color:gray">6</li>
            <li data-id="7" style="background-color:Cyan">7</li>
            <li class="2B" data-id="8" style="background-color:Gold">8</li>
            <li class="3B" data-id="9" style="background-color:Purple">9</li>
            <li class="2B" data-id="10" style="background-color:YellowGreen">10</li>
          </ul>
        </div>
        <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
        <script src="js/quicksand.js"></script>
        <script>
            var data=$(".webbies").clone();  //保存原始列表数据
            $(function() {
              $('#load-webbies a.button').click(function(){  //每个分类按钮绑定点击事件
                    var id=$(this).attr("id");  //获取点击的分类按钮id
                    if (id=="all"){   //判断id
                        source=$(data).find("li"); //获取全部列表项
                    }else{
                        source=$(data).find("li."+id); //获取class符合要求的列表项
                    }
                $(".webbies").quicksand(source); //调用quicksand插件   
              });
            });
        </script>
    </body>
</html>

在使用该插件时，可以注意到每个列表项都添加的data-id属性，这是为了quicksand插件调用，必须添加。
特别注意：在使用CSS添加列表或列表项样式时，务必不要使用其id属性选取，否则动画会出现异常。
该插件的更多高级用法和注意事项请参考其官方网站。