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

WordPress技术博客wp应用技术

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

希望能够对你有所帮助!

上一篇:

下一篇:

文章评论

您好!请登录

取消回复
    展开更多