WEB主题公园
WordPress原创主题,高端网站模板建站,网站模板建站资源以及开发知识分享,尽在WEB主题公园
WEB主题公园致力于开发适合中国人习惯的中文WordPress网站模板,并提供全程视频教程,让您能够轻松的使用网站模板建立好自己的网站!
网格布局插件Grid-A-Licious-响应式设计利器
相对于传统的网页布局,响应式设计在编码上相对来说做的工作要多很多,在这里一部分jQuery插件的出现,对于响应式设计布局来说,真的一件非常便捷的事情,能够大大的减少我们撰写编码的时间,从而大大的压缩成本。
今天我们就来介绍一款jQuery响应式瀑布流布局插件----Grid-A-Licious,这是一个非常棒的响应时布局插件,使用这个插件,你在布局页面的时候就不需要针对不同浏览器的屏幕尺寸写宽度,它会自动根据不同设备自适应宽度。实现了Pinterest瀑布流效果。

首先新需要引入 jQuery
<script src="js/jquery.js"></script>
<script src="js/jquery.grid-a-licious.js"></script>
HTML布局代码
<div id="example">
<div>
<div>itur.</div>
</div>
<div>
<div>Dasdasmdhaj hajsdoat.</div>
</div>
<div>
<div>Wxercquinsequat.</div>
</div>
</div>
初始化
$("#example").gridalicious({
gutter: 1,
width: 75,
animate: true,
animationOptions: {
speed: 200,
duration: 300,
complete:
onComplete
},
});
怎么样,如此简单而轻松的代码,既可以帮助你开始一个非常棒的响应式布局的瀑布流网站!小编觉得,这样酷的布局代码实在是适合做一款图片、商品分享的wordpress主题,你是否期待这样一款wordpress主题的在WEB主题公园上架呢? 相信不久你就会在主题板块看到这样一款主题的!敬请期待把!
希望能够对你有所帮助!
如未标明出处,所有文章均为WEB主题公园原创,如需转载,请附上原文地址,感谢您的支持和关注。
本文地址:https://www.themepark.com.cn/wgbjcjgrid-a-licious-xyssjlq.html
推荐阅读
- 2021年3月9日
- 2016年6月15日
- 2017年2月22日
- 2015年10月8日
- 2023年9月4日
- 2015年7月25日
- 2016年11月26日
- 2023年4月20日
- 2013年5月25日
- 2013年6月28日




