jQuery实现自适应缩略图桩效应与自动分组

这是用一个实验性的jQuery插件，将一组缩略图根据共享数据属性组合（下文将会讲到）堆在一起，当点击其中的一个缩略图组合时，属于这个组合里面的缩略图将会通过CSS转换扩散到一个网格布局里。

查看预览下载附件

通过这个jQuery插件，可以将缩略图根据桩效应自动分组，当点击缩略图组合的时候，会识别图片的共享数据属性，将组合扩散分布到网格布局中的位置，其间加以利用CSS的控制，使其有很好的过渡效果。

网格本身是拥有自适应布局的效果，这就意味着在网页上水平宽度不够的情况下会自动调整布局，可以在不同分辨率的设备上都有个很好的视觉效果。

下面是这个例子中用到的素材原作者，我们得尊重他们，这是做人的基本：

• Bryan Moats
• Mike Dornseif
• Griffin Moore
• Andrea Austoni
• Jakob Pierzyna
• Jack Hughes
• Jeremy Fryc
• Joyce Rice

注意一下，这个示例中的CSS转换和过渡效果，需要浏览器的支持。IE6的同学请见谅了……
那怎么使用这个插件呢﹖很简单，我们得创建一个无序列表，class为tp-grid，示例如下：

<ul id="tp-grid" class="tp-grid">

    <li data-pile="Group 1">
        <a href="#" rel="external nofollow"  rel="external nofollow" >
            <span class="tp-info">
                <span>Some title</span>
            </span>
            <img src="images/1.jpg" />
        </a>
    </li>

    <li data-pile="Group 2">
        <!-- ... -->
    </li>

    <li data-pile="Group 1,Group 2">
        <!-- ... -->
    </li>

    <!-- ... -->

</ul>

其中的data-pile属性是控制缩略图组合的名称，我们可以根据这个名称给所有的缩略图分类，注意的是，其中的任何一张缩略图可以有两个或两个以上的类别，也就是说可以给这个data-pile属性同时定义两个或两个以上的名称。最后的效果将根据data-pile属性来自动分组。

插件引用方式：

$( '#tp-grid' ).stapel();

jQuery选项

下面是默认选项，可自己DIY，实现自己想要的效果：

$.Stapel.defaults = {

    // space between the items
    gutter : 40,

    // the rotations degree for the 2nd and 3rd item
    // (to give a more realistic pile effect)
    pileAngles : 2,

    // animation settings for the items of the clicked pile
    pileAnimation : {
        openSpeed : 400,
        openEasing : 'ease-in-out',
        closeSpeed : 400,
        closeEasing : 'ease-in-out'
    },

    // animation settings for the other piles
    otherPileAnimation : {
        openSpeed : 400,
        openEasing : 'ease-in-out',
        closeSpeed : 350,
        closeEasing : 'ease-in-out'
    },

    // delay for each item of the pile
    delay : 0,

    // random rotation for single items
    randomAngle : false,

    // callback functions
    onLoad : function() { return false; },
    onBeforeOpen : function( pileName ) { return false; },
    onAfterOpen : function( pileName, totalItems ) { return false; },
    onBeforeClose : function( pileName ) { return false; },
    onAfterClose : function( pileName, totalItems ) { return false; }

};

示例中的基本样式保存在stapel.css文件里面，可以下载附件后查看下，这里就不多介绍了。

示例预览

演示一演示二演示三

最后提醒下，要记得引入用jQuery库。祝大家周末愉快……

译文文章：Codrops