2025年2月15日 星期六 甲辰(龙)年 腊月十五 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

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

时间:12-14来源:作者:点击数:31
CDSY,CDSY.XYZ

Grid-A-Licious 是一个简单易用的 jQuery 插件,可用于创建响应式瀑布流布局,针对不同设备可自动适应宽度。你可以通过参数设置它的宽度以及动态显示时的速度、延迟等等,定制性是比较高的。

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

如何使用

首先在 HTML 页面头部中引入 jQuery 框架和 Grid-A-Licious 插件

  • <script src="jquery.1.8.0.min.js"></script>
  • <script src="jquery.grid-a-licious.min.js"></script>

然后按如下方式添加内容,可自定义设置item样式

  • <div id="demo">
  • <div>
  • 演示演示
  • </div>
  • 任意个div
  • <div>
  • <div>测试内容...</div>
  • </div>
  • </div>

最后初始化即可

  • $("#demo").gridalicious({
  • gutter: 10,
  • width: 200,
  • animate: true,
  • animationOptions: {
  • speed: 150,
  • duration: 300,
  • complete: onComplete
  • }
  • });

可选参数

参数名 默认值 可选值 描述 示例
width 225px - -
  • $("#container").gridalicious({
  • width: 225
  • });
gutter 20px - -
  • $("#container").gridalicious({
  • gutter: 20
  • });
selector .item - -
  • $("#container").gridalicious({
  • selector: '.item'
  • });
animate false - -
  • $("#container").gridalicious({
  • animate: false
  • });
animationOption 225px - 动画选项
  • $("#container").gridalicious({
  • animate: true,
  • animationOptions: { […] }
  • });

动画参数

参数名 默认值 描述
queue 列队显示 true
speed 显示每个item的时间 200
duration 动画执行的时间 300
effect item 显示的方式,目前只支持 fadeInOnAppear ,更多特效正在添加中… fadeInOnAppear
complete 动画完成以后的回调函数 function()

动态添加 item

  • $('#prepend').click(function(){
  • $("#example3").gridalicious('prepend', makeboxes());
  • });
  • $('#append').click(function(){
  • $("#example3").gridalicious('append', makeboxes());
  • });

相关链接

  • 项目地址:http://suprb.com/apps/gridalicious/
  • Github地址:https://github.com/suprb/Grid-A-Licious
CDSY,CDSY.XYZ
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐