响应式瀑布流插件Grid-A-Licious

Grid-A-Licious是一款遵守MIT协议的响应式瀑布流插件。该插件总代码行不超过400行，实现很巧妙，使用时也很流畅。实现原理也很简单，根据屏幕宽度和参数中设置的列宽度以及每项之间的间隔宽度，计算出当前屏幕宽度下应该生成几个等宽列；列生成好之后，再把每项放到等宽列中；当屏幕尺寸改变时，重新计算列表，然后再重新填充项。

使用该插件也很方便。使用实例：

<html>
	<head>
		<meta charset="utf-8" />
		<title>Grid-A-Licious</title>
	</head>
	<body>
		<div id="gridA">
			<div class="item">这是瀑布流中的一项</div>
			<div class="item">这是瀑布流中的一项</div>
			<div class="item">这是瀑布流中的一项</div>
			<div class="item">这是瀑布流中的一项</div>
			<div class="item">这是瀑布流中的一项</div>
			<div class="item">这是瀑布流中的一项</div>
			<div class="item">这是瀑布流中的一项</div>
			<div class="item">这是瀑布流中的一项</div>
			<div class="item">这是瀑布流中的一项</div>
			<div class="item">这是瀑布流中的一项</div>
			.....
		</div>
		<script type="text/javascript" src="jquery-1.11.0.js" ></script>
		<script type="text/javascript" src="jquery.grid-a-licious.min.js" ></script>
		<script type="text/javascript">
                (function(){
	               $("#gridA").gridalicious({});	
                 })()
                </script>
	</body>
</html>

　　

插件默认参数：

{
        selector: '.item',　　//设置瀑布流中每一项的类名
        width: 225,　　　　　　//设置等宽列的宽度，默认225，注意后面不要加"px"
        gutter: 20,　　　　　　//设置瀑布流中没项的间隔，默认20，注意后面不要加"px"
        animate: false,      //设置生成瀑布流的动画效果，默认无动画效果
        animationOptions: {  //动画效果控制选项
            speed: 200,　　　　　　　　　　
            duration: 300,　　　　　　　　
            effect: 'fadeInOnAppear',　 //目前就这一种动画效果
            queue: true,
            complete: function () {}　　//动画完成后的回调
        }
}

以上参数均为可选参数。

插件效果实例http://suprb.com/apps/gridalicious/

插件源码下载https://github.com/suprb/Grid-A-Licious　

posted @ 2015-04-07 22:04  adtxgc  阅读(937)  评论(0)    收藏  举报