wordpress主题建站,选择WEB主题公园中文原创企业网站模板!

WordPress技术博客 news
您现在的位置:首页 > WordPress技术博客 > 网格布局插件Grid-A-Licious-响应式设计利器

本周推荐网站模板

WordPress主题视频教程

最近更新的WordPress主题
最新更新过的网站模板

网格布局插件Grid-A-Licious-响应式设计利器

发布时间:2013/06/11 WordPress技术博客 wp应用技术 2093 0

相对于传统的网页布局,响应式设计在编码上相对来说做的工作要多很多,在这里一部分jQuery插件的出现,对于响应式设计布局来说,真的一件非常便捷的事情,能够大大的减少我们撰写编码的时间,从而大大的压缩成本。

今天我们就来介绍一款jQuery响应式瀑布流布局插件----Grid-A-Licious,这是一个非常棒的响应时布局插件,使用这个插件,你在布局页面的时候就不需要针对不同浏览器的屏幕尺寸写宽度,它会自动根据不同设备自适应宽度。实现了Pinterest瀑布流效果。

091547ww0o0mow5k00o25o

首先新需要引入 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主题公园上架呢? 相信不久你就会在主题板块看到这样一款主题的!敬请期待把!

希望能够对你有所帮助!

WordPress原创主题,高端网站模板建站,网站模板建站资源以及开发知识分享,尽在WEB主题公园

如未标明出处,所有文章均为WEB主题公园原创,如需转载,请附上原文地址,感谢您的支持和关注。

============关于WEB主题公园=============

WEB主题公园致力于开发适合中国人习惯的中文WordPress网站模板,并提供全程视频教程,让您能够轻松的使用网站模板建立好自己的网站!

分享WordPress开发,网站维护经验,分享更多有用的WordPress知识

WEB主题公园--做最好的中文原创WordPress主题,网站模版。