第11章 jQuery插件应用-任务2 Pinterest Grid实现响应式网格瀑布流布局
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
➢该瀑布流插件可以随父容器的大小自动调节网格布局，并且支持 IE8+的IE浏览器。
Pinterest Grid参数
➢no_columns：网格布局一行的列数。默认值为一行3个网格。 ➢padding_x：网格在X轴方向的padding值。默认值为10像素。 ➢padding_y：网格在Y轴方向的padding值。默认值为10像素。 ➢margin_bottom：网格底部的margin值。默认值为50像素。 ➢single_column_breakpoint：指定在视口多大时一行只显示一
• 一个jQuery框架文件 • 一个pinterest_grid插件 • 页面添加瀑布流布局的CSS样式文件。
Pinterest Grid插件简介
➢Pinterest采用的是瀑布流的形式展现图片内容，无需用户翻页， 新的图片不断自动加载在页面底端，让用户不断的发现新的图片。
➢Pinterest Grid是一款仿Pinterest网站的响应式网格瀑布流布局 jQuery插件。
});
练一练
练习 使用Validate插件和supersized插件实现适应手机的表单验证和背景切换效果，如下
图所示。
任务描述
在网页中常常能看到瀑布流图片网页 特效，本任务使用Pinterest Grid插 件实现响应式网格瀑布流布局，如图 所示。
演示任务2：Pinterest Grid实现响应式网格瀑布流布局
任务分析
本案例使用Pinterest Grid插件实现响应式网格瀑布流布局
1.下载Pinterest Grid插件 2.需要引入三个文件：
关键代码
（3）wk.baidu.com瀑布流布局添加样式
<link rel="stylesheet" type="text/css" href="css/pinterest grid.css" />
（4）初始化插件
$("#gallery-wrapper").pinterest_grid({ no_columns: 4, padding_x: 10, padding_y: 10, margin_bottom: 50, single_column_breakpoint: 700
个网格。
任务实现
关键代码
（1）引入jQuery和pinterest_grid.js文件
<script src=“js/jquery-1.12.4.js”></script> <script src="js/pinterest_grid.js"></script>
（2）设计HTML结构
代码省略
任务实现
Pinterest Grid参数
➢no_columns：网格布局一行的列数。默认值为一行3个网格。 ➢padding_x：网格在X轴方向的padding值。默认值为10像素。 ➢padding_y：网格在Y轴方向的padding值。默认值为10像素。 ➢margin_bottom：网格底部的margin值。默认值为50像素。 ➢single_column_breakpoint：指定在视口多大时一行只显示一
• 一个jQuery框架文件 • 一个pinterest_grid插件 • 页面添加瀑布流布局的CSS样式文件。
Pinterest Grid插件简介
➢Pinterest采用的是瀑布流的形式展现图片内容，无需用户翻页， 新的图片不断自动加载在页面底端，让用户不断的发现新的图片。
➢Pinterest Grid是一款仿Pinterest网站的响应式网格瀑布流布局 jQuery插件。
});
练一练
练习 使用Validate插件和supersized插件实现适应手机的表单验证和背景切换效果，如下
图所示。
任务描述
在网页中常常能看到瀑布流图片网页 特效，本任务使用Pinterest Grid插 件实现响应式网格瀑布流布局，如图 所示。
演示任务2：Pinterest Grid实现响应式网格瀑布流布局
任务分析
本案例使用Pinterest Grid插件实现响应式网格瀑布流布局
1.下载Pinterest Grid插件 2.需要引入三个文件：
关键代码
（3）wk.baidu.com瀑布流布局添加样式
<link rel="stylesheet" type="text/css" href="css/pinterest grid.css" />
（4）初始化插件
$("#gallery-wrapper").pinterest_grid({ no_columns: 4, padding_x: 10, padding_y: 10, margin_bottom: 50, single_column_breakpoint: 700
个网格。
任务实现
关键代码
（1）引入jQuery和pinterest_grid.js文件
<script src=“js/jquery-1.12.4.js”></script> <script src="js/pinterest_grid.js"></script>
（2）设计HTML结构
代码省略
任务实现