插件描述：jquery可自由拖拽div布局类似win10系统的无规则拖拽布局
Html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <section class="demo"><div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="2" data-sizey="1"></li> <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li> <li data-row="3" data-col="2" data-sizex="2" data-sizey="1"></li> <li data-row="1" data-col="2" data-sizex="2" data-sizey="2"></li> <li class="try" data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li> <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li> <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li> <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li> </ul></div> |
引用jquery类库以后，再引用插件js文件，然后用几句jquery代码就可以调用
1 2 3 4 5 6 7 8 9 10 11 12 | <script src="js/jquery.gridster.js" type="text/javascript"></script><script type="text/javascript"> var gridster; $(function() { gridster = $(".gridster > ul").gridster({ widget_margins: [10, 10], widget_base_dimensions: [140, 140], min_cols: 6 }).data('gridster'); });</script> |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery MPlayer音乐播放器插件
- 下一个特效： jQuery响应式全屏轮播插件royalslider.js