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
时间： 2024-12-07 00:05:02