• 欢迎访问秦皇岛网络公司-炎黄科技 | QHDSUDU.COM
  • 今天是:2024 年 06 月 23 日 网站已经正常运行 [7294] 天
信息讲堂

通过masonry插件实现完美布局

字号:     2012-01-13 16:25:41   来源:炎黄科技   上一条    下一条
    大家在进行秦皇岛网站制作的时候可能会遇到图片列表展示的时候,图片的大小不一致,如果全是限制大小的话图片可能会变形,那个统一定义一个宽度又会倒是高度不同,这样就会让图片列表错乱无序,那么通过什么方式可以让错落无序变成错落有序呢?
今天笔者为大家接受一个jq插件名字叫:masonry,当然是国外牛人写的啦!
废话不多说先看看我自己网站使用的效果:

调试masonry很简单的,看下边的步骤:
第一步:准备好masonry和jquery框架
jquery的下载地址:点击下载
masonry的下载地址:点击下载
第二步:在需要的网页加入以下HTML代码作为图片列表
...
...
...
...
...
...
...
...
#container的样式你可以根据你自己的需求去定义,.item的样式也是可以随意定义,不过请不要设置漂浮!
然后再HTML下方分别载入jq与masonry,代码如下:





这个时候已经可以实现以上的列表样式了,先看一下:

如果您的ITEM容器中含有图片需要等待图片载入完成后再执行样式排版,所以如果你的item容器中有图片的话,请将上方的js替换为一下:


谢谢大家,基本的操作方式就是这么简单,如果有什么问题请联系我
下面是利用masonry制作的一些网站案例:
http://www.qhdsudu.com/anli/index/3/sa/
秦皇岛网络公司联系电话
致电 137 859 36100
7×24小时服务热线
秦皇岛网络公司工作时间
在线咨询
每工作日 9:00-17:30
点击进入>
预约秦皇岛网站制作专家
预约专家
为您提供一对一解决方案
点击进入>
秦皇岛网络公司的地图位置
地图位置
在地图上看我们的位置
点击进入>
秦皇岛网络公司官方微博
访问官方微博
唯一官方微博平台
点击进入>
版权所有 ? 2010-2011 秦皇岛网络公司 秦皇岛网站制作
Copyright ? 2010-2011 Qhdsudu.com All Rights Reserved 冀ICP备13009153号-13
联系电话:13785936100  电子邮箱:1514969798@qq.com
微信沟通 QQ客服
扫描二维码添加客服微信