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

相对于传统的网页布局,响应式设计在编码上相对来说做的工作要多很多,在这里一部分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主题公园上架呢? 相信不久你就会在主题板块看到这样一款主题的!敬请期待把!

希望能够对你有所帮助!

上一篇:

下一篇:

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

本文地址:https://www.themepark.com.cn/wgbjcjgrid-a-licious-xyssjlq.html

WordPress原创主题,高端网站模板建站,网站模板建站资源以及开发知识分享,尽在WEB主题公园
WEB主题公园致力于开发适合中国人习惯的中文WordPress网站模板,并提供全程视频教程,让您能够轻松的使用网站模板建立好自己的网站!

相关文章

文章评论

您好!请登录

取消回复

    个人中心我的

    联系我们x

    联系我们,从qq在线客服,电话和邮件

    售前客服-1[点击对话]

    购买之前想要了解和咨询

    售前客服-2[点击对话]

    购买之前想要了解和咨询

    售后客服[售后支持]

    购买后输入订单号加好友

    咨询热线:0731-8578 7193

    联系邮箱:
    info@themepark.com.cn

    请注意:在线客服以及咨询热线请在 工作日的9:30~18:00来电咨询 电子邮件在任何时间都会回复

    客服
    回到顶部 顶部