知识点
Pinterest
Grid插件简介
Pinterest采用的是瀑布流的形式展现图片内容，无需用户翻页，新的图片不断自动加载在页面底端，让用户不断的发现新的图片。Pinterest Grid是一款仿Pinterest网站的响应式网格瀑布流布局jQuery插件。该瀑布流插件使用简单，可以随父容器的大小自动调节网格布局，并且支持IE8+的IE浏览器。
Pinterest Grid参数
该瀑布流布局插件有以下一些可用的配置参数。
no_columns：网格布局一行的列数。默认值为一行3个网格。
padding_x：网格在X轴方向的padding值。默认值为10像素。
padding_y：网格在Y轴方向的padding值。默认值为10像素。
margin_bottom：网格底部的margin值。默认值为50像素。
single_column_breakpoint：指定在视口多大时一行只显示一个网格。
Pinterest Grid实现响应式网格瀑布流布局
任务描述
在网页中常常能看到瀑布流图片网页特效，本任务使用Pinterest Grid插件实现响应式网格瀑布流布局，如图所示。
任务分析
使用Pinterest Grid插件实现响应式网格瀑布流布局，需要引入三个文件：一个jQuery框架文件、一个pinterest_grid插件和为页面添加瀑布流布局的CSS样式文件。
任务实现
1.引入jQuery和pinterest_grid.js文件
<script src=“js/jquery-1.12.4.js”></script>
<scriptsrc="js/pinterest_grid.js"></script>
2.设计HTML结构
<section id="gallery-wrapper">
<articleclass="white-panel">
<imgsrc="img/1.jpg">
<h1><ahref="#">标题 1</a></h1>
<p>图片描述 1</p>
</article>
<articleclass="white-panel">
<imgsrc="img/2.jpg">
<h1><ahref="#">标题 2</a></h1>
<p>图片描述 2</p>
</article>
……
</section>
3.为瀑布流布局添加样式
<linkrel="stylesheet" type="text/css" href="css/pinterestgrid.css" />
4. 初始化插件
<script type="text/javascript">
$(function(){
$("#gallery-wrapper").pinterest_grid({
no_columns:4,
padding_x: 10,
padding_y: 10,
margin_bottom: 50,
single_column_breakpoint: 700
});
});
</script>
5. 案例完整代码
<!doctype html>
<html>
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<metaname="viewport" content="width=device-width, initial-scale=1.0">
<title>兼容IE8的响应式网格瀑布流布局jQuery插件</title>
<linkrel="stylesheet" href="css/normalize.css">
<linkrel="stylesheet" type="text/css"href="css/default.css">
<linkrel="stylesheet" type="text/css" href="css/pinterestgrid.css" />
</head>
<body>
<sectionclass="htmleaf-container">
<headerclass="htmleaf-header">
<h1>兼容IE8的响应式网格瀑布流布局jQuery插件 <span>瀑布流布局</span></h1>
</header>
</section>
<sectionid="gallery-wrapper">
<articleclass="white-panel">
<imgsrc="img/1.jpg">
<h1><ahref="#">标题 1</a></h1>
<p>图片描述 1</p>
</article>
<articleclass="white-panel">
<imgsrc="img/2.jpg">
<h1><ahref="#">标题 2</a></h1>
<p>图片描述 2</p>
</article>
……
</section>
<footerclass="related">
<h3>兼容IE8+瀑布流布局</h3>
</footer>
<scriptsrc=“js/jquery-1.12.4.js”></script>
<scriptsrc="js/pinterest_grid.js"></script>
<scripttype="text/javascript">
$(function(){
$("#gallery-wrapper").pinterest_grid({
no_columns:4,
padding_x: 10,
padding_y: 10,
margin_bottom: 50,
single_column_breakpoint: 700
});
});
</script>
</body>
</html>
使用Validate插件和supersized插件实现适应手机的表单验证和背景切换效果，如下图所示。
参考答案
