jq制作可以任意拖拽排序的网格布局插件


插件描述: 可拖拽和删除jQuery网格布局插件jQuery Gridly,基于jQuery插件实现,拖拽和删除自动计算宽度和高度, 拖拽可交互网格位置,删除自动补位,点击网格自动放大自动重新布局,效果是非常不错的,推荐使用。

使用方法: 1.加载插件和jQuery

 <script src="libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script><script src="javascript/jquery.gridly.js" type="text/javascript"></script><link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" />style type="text/css">  .gridly {    position: relative;    width: 960px;  }  .brick.small {    width: 140px;    height: 140px;  }  .brick.large {    width: 300px;    height: 300px;  }</style>

2.HTML内容

 <div class="gridly">  <div class="brick small"></div>  <div class="brick small"></div>  <div class="brick large"></div>  <div class="brick small"></div>  <div class="brick small"></div>  <div class="brick large"></div></div>

3.函数调用

 <script>  $('.gridly').gridly({    base: 60, // px     gutter: 20, // px    columns: 12  });</script>

注意:所有网页特效均为互联网上收集,若有侵权,请告知删除。

关键词: jQuery网格布局jQuery网格特效JS网格布局

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享