一、負邊距與浮動布局
1.1、負邊距
所謂的負邊距就是margin取負值的情況，如margin:-100px，margin:-100%。當一個元素與另一個元素margin取負值時将拉近距離。常見的功能如下：
1.1.1、向上移動
當多個元素同時從标準流中脫離開來時，如果前一個元素的寬度為100%寬度，後面的元素通過負邊距可以實作上移。當負的邊距超過自身的寬度将上移，隻要沒有超過自身寬度就不會上移，示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>負邊距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
height: 100px;
background: lightblue;
width: 100%;
float: left;
}
#div2 {
height: 100px;
background: lightgreen;
width: 30%;
float: left;
margin-left: -100%;
}
</style>
</head>
<body>
<div id="div1">div1
</div>
<div id="div2">div2
</div>
</body>
</html> margin-left:-29%時運作效果：
margin-left:-30%時運作效果：
margin-left:-100%時運作效果：
1.1.2、去除清單右邊框
開發中常需要在頁面中展示一些清單，如商品展示清單等，如果我們要實作如下布局：
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>負邊距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
width: 800px;
margin: 0 auto;
border: 3px solid lightblue;
overflow: hidden;
margin-top: 10px;
}
.box {
width: 180px;
height: 180px;
margin: 0 20px 20px 0;
background: lightgreen;
float: left;
}
</style>
</head>
<body>
<div id="div1">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
</html> 運作後的結果：
但是上面的效果中右邊多出了20px的距離，底下多出20px空白，解決方法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>負邊距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
width: 780px;
height: 380px;
margin: 0 auto;
border: 3px solid lightblue;
overflow: hidden;
margin-top: 10px;
}
.box {
width: 180px;
height: 180px;
margin: 0 20px 20px 0;
background: lightgreen;
float: left;
}
#div2{
margin-right: -20px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
</body>
</html> 方法是使用了邊距折疊，可以在前面的文章中檢視到細節，基本原理如下圖所示：
方法2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>負邊距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
width: 780px;
margin: 0 auto;
border: 3px solid lightblue;
overflow: hidden;
margin-top: 10px;
}
#div2{
margin-right: -20px;
margin-bottom: -20px;
overflow: auto;
}
.box {
width: 180px;
height: 180px;
margin: 0 20px 20px 0;
background: lightgreen;
float: left;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
</body>
</html> 效果：
1.1.3、負邊距+定位，實作水準垂直居中
具體請參考《CSS3與頁面布局學習總結（三）——BFC、定位、浮動、7種垂直居中方法》
1.1.4、去除清單最後一個li元素的border-bottom
方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>負邊距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
#news {
width: 200px;
border: 2px solid lightblue;
margin: 20px 0 0 20px;
}
#news li{
height: 26px;
line-height: 26px;
border-bottom: 1px dashed lightblue;
}
.lastLi{
margin-bottom:-1px ;
}
</style>
</head>
<body>
<div id="news">
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
<li>Item D</li>
<li class="lastLi">Item E</li>
</ul>
</div>
</body>
</html> View Code
方法二：
使用CSS3中的新增加選擇器，選擇最後一個li，不使用類樣式，好處是當li的個數不确定時更加友善。
如果li的border-bottom顔色與ul的border顔色是一樣的時候，在視覺上是被隐藏了。如果其顔色不一緻的時候還是有問題，給ul寫個overflow：hidden；就可以解決這個問題。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
margin: 0 auto;
margin-top: 20px;
width: 260px;
border: 2px solid #1FC195;
list-style: none;
}
ul li {
height: 30px;
line-height: 30px;
border-bottom: 1px dashed #1FC195;
font-size: 14px;
padding-left: 5px;
}
ul li:last-child {
margin-bottom: -1px;
}
</style>
</head>
<body>
<ul>
<li>新聞清單新聞清單新聞清單</li>
<li>新聞清單新聞清單新聞清單</li>
<li>新聞清單新聞清單新聞清單</li>
<li>新聞清單新聞清單新聞清單</li>
<li>新聞清單新聞清單新聞清單</li>
<li>新聞清單新聞清單新聞清單</li>
<li>新聞清單新聞清單新聞清單</li>
</ul>
</body>
</html> 運作結果：
1.2、雙飛翼布局
經典三列布局，也叫做聖杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個布局模型概念，在國内最早是由淘寶UED的工程師傳播開來，在中國也有叫法是雙飛翼布局，它的布局要求有幾點：
1、三列布局，中間寬度自适應，兩邊定寬；
2、中間欄要在浏覽器中優先展示渲染；
3、允許任意列的高度最高；
4、要求隻用一個額外的DIV标簽；
5、要求用最簡單的CSS、最少的HACK語句；
在不增加額外标簽的情況下，聖杯布局已經非常完美，聖杯布局使用了相對定位，以後布局是有局限性的，而且寬度控制要改的地方也多。在淘寶UED（User Experience Design）探讨下，增加多一個div就可以不用相對布局了，隻用到了浮動和負邊距，這就是我們所說的雙飛翼布局，實作的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>雙飛翼</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
font: 20px/40px "microsoft yahei";
color: white;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
}
#header,
#footer {
height: 12.5%;
background: deepskyblue;
}
#main {
height: 75%;
}
#center,
#left,
#right {
height: 100%;
float: left;
}
#center {
width: 100%;
background: lightgreen;
}
#right {
background: lightblue;
width: 20%;
margin-left: -20%;
}
#left {
background: lightcoral;
width: 20%;
margin-left: -100%;
}
#main-inner {
padding-left: 20%;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
header
</div>
<div id="main">
<div id="center">
<div id="main-inner">
center
</div>
</div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html> 運作效果：
示例中增加一個main-inner的目的是因為當left上移時與center重疊了，left覆寫了center，通過main-inner的padding将left占用的位置空出。
1.3、多欄布局
1.3.1、栅格系統
欄栅格系統就是利用浮動實作的多欄布局，在bootstrap中用的非常多，這裡以一個980像素的寬實作4列的栅格系統，示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>栅格系統</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
#container {
width: 980px;
margin: 0 auto;
height: 10%;
}
#container div {
height: 100%;
}
.col25 {
width: 25%;
background: lightgreen;
float: left;
}
.col50 {
width: 50%;
background: lightblue;
float: left;
}
.col75 {
width: 75%;
background: lightcoral;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div class="col50">
A
</div>
<div class="col50">
B
</div>
<div class="col25">
C
</div>
</div>
</body>
</html> 運作結果：
同樣的原理可以輕易擴充到8列，10列，16列的栅格系統。
1.3.2、多列布局
栅格系統并沒有真正實作分欄效果（如word中的分欄），CSS3為了滿足這個要求增加了多列布局子產品，如果需要實作多列布局子產品先看看這幾個CSS3屬性：
column-count：<integer> | auto
功能：設定或檢索對象的列數
适用于：除table外的非替換塊級元素, table cells, inline-block元素
<integer>： 用整數值來定義列數。不允許負值
auto： 根據 <' column-width '> 自定配置設定寬度
column-gap：<length> | normal
功能：設定或檢索對象的列與列之間的間隙
适用于：定義了多列的元素
計算值：絕對長度值或者normal
column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '>
功能：設定或檢索對象的列與列之間的邊框。與border屬性類似。
适用于：定義了多列的元素
columns：<' column-width '> || <' column-count '>
功能：設定或檢索對象的列數和每列的寬度
适用于：除table外的非替換塊級元素, table cells, inline-block元素
<' column-width '>： 設定或檢索對象每列的寬度
<' column-count '>： 設定或檢索對象的列數
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多列布局</title>
<style type="text/css">
#div1{
column-count: 3; /*分3欄*/
column-gap: 40px; /*欄間距*/
column-rule: 2px solid lightgreen; /*欄間分隔線，與border設定類似*/
line-height: 26px;
font-size: 14px;
height: 500px;
background: lightcyan;
}
</style>
</head>
<body>
<div id="div1">
CSS即層疊樣式表（Cascading StyleSheet）。 在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局、字型、顔色、背景和其它效果實作更加精确的控制。 隻要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式。CSS3是CSS技術的更新版本，CSS3語言開發是朝着子產品化發展的。以前的規範作為一個子產品實在是太龐大而且比較複雜，是以，把它分解為一些小的子產品，更多新的子產品也被加入進來。這些子產品包括： 盒子模型、清單子產品、超連結方式 、語言子產品 、背景和邊框 、文字特效 、多欄布局等。CSS即層疊樣式表（Cascading StyleSheet）。 在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局、字型、顔色、背景和其它效果實作更加精确的控制。 隻要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式。CSS3是CSS技術的更新版本，CSS3語言開發是朝着子產品化發展的。以前的規範作為一個子產品實在是太龐大而且比較複雜，是以，把它分解為一些小的子產品，更多新的子產品也被加入進來。這些子產品包括： 盒子模型、清單子產品、超連結方式 、語言子產品 、背景和邊框 、文字特效 、多欄布局等。
</div>
</body>
</html> View Code
運作結果：
二、彈性布局（Flexbox）
2.1、概要
假設在項目中有一個這樣的需求：同一行有3個菜單，每個菜單占1/3的寬度，怎麼實作？
可能你會這樣實作：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
html,
body {
height: 100%;
}
#menu {
width: 980px;
margin: 0 auto;
}
#menu li{
width: 33.3%;
float: left;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#" class="item">公司簡介</a></li>
<li><a href="#" class="item">商品展示</a></li>
<li><a href="#" class="item">背景管理</a></li>
</ul>
</body>
</html> View Code
結果：
上面的辦法有明顯的不足就是可擴充性太差，因為如果再添加一項就會有一個菜單項會換行，解決方法是：CSS3中提供了強大的彈性盒布局。示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
html,
body {
height: 100%;
}
#menu {
width: 980px;
margin: 0 auto;
display: flex; /*目前塊為彈性盒*/
}
#menu li{
flex: auto; /*彈性盒中的單項*/
float: left;
}
#menu li a{
display:block;
height: 26px;
line-height: 26px;
border:1px solid cornflowerblue;
margin-right: 2px;
text-decoration: none;
text-align: center;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#" class="item">公司簡介</a></li>
<li><a href="#" class="item">商品展示</a></li>
<li><a href="#" class="item">背景管理</a></li>
<li><a href="#" class="item">企業文化</a></li>
<li><a href="#" class="item">線上咨詢</a></li>
</ul>
</body>
</html> 運作結果：
布局的傳統解決方案，基于盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對于那些特殊布局非常不友善，比如，垂直居中就不容易實作。
2009年，W3C提出了一種新的方案—-Flex布局，可以簡便、完整、響應式地實作各種頁面布局。目前，它已經得到了所有浏覽器的支援，這意味着，現在就能很安全地使用這項功能。
Flex布局将成為未來布局的首選方案。
2.2、Flex布局的定義
Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為Flex布局，如果值為flex則容器為塊标簽。
.box{display:flex;} 行内元素也可以使用Flex布局，如果值為inline-flex則容器為行内标簽。
.box{display:inline-flex;} Webkit核心的浏覽器，必須加上-webkit字首。
.box{display:-webkit-flex;/* Safari */display:flex;} 注意，設為Flex布局以後，子元素的float、clear和vertical-align屬性将失效。
display屬性值flex： 将對象作為彈性伸縮盒顯示。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
#div1{
background: yellow;
display: flex;
height: 150px;
}
#div1 div,#div2 div{
width: 100px;
height: 100px;
background: #1fc195;
}
#div2{
background: yellow;
display: inline-flex;
height: 150px;
}
</style>
</head>
<body>
<div id="div1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div id="div2">
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html> 結果：
div2此時為内聯元素，并未占用整行。
2.3、基本概念
采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。
容器預設存在兩根軸：水準的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
項目預設沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。
2.4、容器的屬性
以下6個屬性設定在容器上。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
2.4.1、 flex-direction屬性
flex-direction屬性決定主軸的方向（即項目的排列方向）。
.box{flex-direction:row|row-reverse|column|column-reverse;} 它可能有4個值：
row（預設值）：主軸為水準方向，起點在左端。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:20px/40px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
flex-direction: row; /**預設方向*/
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height: 100px;
flex: auto;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
</ul>
</body>
</html> 結果：
row-reverse：主軸為水準方向，起點在右端。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:20px/40px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
flex-direction: row-reverse; /**row-reverse：主軸為水準方向，起點在右端。*/
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height: 100px;
flex: auto;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
</ul>
</body>
</html> View Code
結果：
column：主軸為垂直方向，起點在上沿。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:20px/40px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
flex-direction: column; /**column：主軸為垂直方向，起點在上沿。*/
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height: 100px;
flex: auto;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
</ul>
</body>
</html> View Code
結果：
column-reverse：主軸為垂直方向，起點在下沿。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:20px/40px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
flex-direction: column-reverse; /**column-reverse：主軸為垂直方向，起點在下沿*/
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
}
.a{
flex:1;
}
.b{
flex:2;
}
.c{
flex:3;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
</ul>
</body>
</html> View Code
結果：
把單項的flex屬性取消可以檢視起點位置。
2.4.2、flex-wrap屬性
預設情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
.box{flex-wrap:nowrap|wrap|wrap-reverse;} 它可能取三個值。
（1）nowrap（預設）：不換行。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:20px/40px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
flex-wrap: nowrap; /**nowrap（預設）：不換行。*/
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height:100px;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
<li class="a">4公司簡介</li>
<li class="b">5商品展示</li>
<li class="c">6背景管理</li>
<li class="a">7公司簡介</li>
<li class="b">8商品展示</li>
<li class="c">9背景管理</li>
</ul>
</body>
</html> 結果：
（2）wrap：換行，第一行在上方。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:20px/40px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
flex-wrap: wrap; /**wrap：換行，第一行在上方。*/
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height:100px;
flex:auto;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
<li class="a">4公司簡介</li>
<li class="b">5商品展示</li>
<li class="c">6背景管理</li>
<li class="a">7公司簡介</li>
<li class="b">8商品展示</li>
<li class="c">9背景管理</li>
</ul>
</body>
</html> View Code
結果：
（3）wrap-reverse：換行，第一行在下方。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:20px/40px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
flex-wrap: wrap-reverse; /**wrap-reverse：換行，第一行在下方*/
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height:100px;
flex:auto;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
<li class="a">4公司簡介</li>
<li class="b">5商品展示</li>
<li class="c">6背景管理</li>
<li class="a">7公司簡介</li>
<li class="b">8商品展示</li>
<li class="c">9背景管理</li>
</ul>
</body>
</html> View Code
結果：
2.4.3、flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
.box{flex-flow:||;} Flex容器可以設定屬性flex-flow，取值為row,row-reverse,column,column-reverse四種值
row：顯示在一行中
row-reverse：顯示在一行中，反轉
column：顯示在一列中
column-reverse：顯示在一列中 反轉
View Code
View Code
取flex-wrap的值
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:20px/40px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
flex-flow: wrap-reverse;
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height:100px;
width: 200px;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
<li class="a">4公司簡介</li>
<li class="b">5商品展示</li>
<li class="c">6背景管理</li>
<li class="a">7公司簡介</li>
<li class="b">8商品展示</li>
<li class="c">9背景管理</li>
</ul>
</body>
</html> 結果：
2.4.4、justify-content屬性
justify-content屬性定義了項目在主軸上的對齊方式。
.box{justify-content:flex-start|flex-end|center|space-between|space-around;} 它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸為從左到右。
flex-start（預設值）：左對齊
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
display: flex; /**指定為彈性盒容器*/
background: lightgreen;
height: 300px;
justify-content:flex-start;
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height: 100px;
}
.a,.c{
width: 100px;
}
.b{
width: 200px;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
</ul>
</body>
</html> 結果：
flex-end：右對齊
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
display: flex; /**指定為彈性盒容器*/
background: lightgreen;
height: 300px;
justify-content:flex-end;
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height: 100px;
}
.a,.c{
width: 100px;
}
.b{
width: 200px;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
</ul>
</body>
</html> View Code
結果：
center： 居中
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
display: flex; /**指定為彈性盒容器*/
background: lightgreen;
height: 300px;
justify-content:center;
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height: 100px;
}
.a,.c{
width: 100px;
}
.b{
width: 200px;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
</ul>
</body>
</html> 結果：
space-between：兩端對齊，項目之間的間隔都相等。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
display: flex; /**指定為彈性盒容器*/
background: lightgreen;
height: 300px;
justify-content:space-between;
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height: 100px;
}
.a,.c{
width: 100px;
}
.b{
width: 200px;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
</ul>
</body>
</html> View Code
結果：
space-around：每個項目兩側的間隔相等。是以，項目之間的間隔比項目與邊框的間隔大一倍。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
display: flex; /**指定為彈性盒容器*/
background: lightgreen;
height: 300px;
justify-content:space-around;
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height: 100px;
}
.a,.c{
width: 100px;
}
.b{
width: 200px;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
</ul>
</body>
</html> View Code
結果：
2.4.5、align-items屬性
align-items屬性定義項目在交叉軸上如何對齊。
.box{align-items:flex-start|flex-end|center|baseline|stretch;} 它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。
flex-start：交叉軸的起點對齊。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:20px/40px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
align-items: flex-start; /*交叉軸的起點對齊。*/
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height:100px;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
</ul>
</body>
</html> View Code
結果：
flex-end：交叉軸的終點對齊。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:20px/40px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
align-items: flex-end; /*flex-end：交叉軸的終點對齊。*/
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height:100px;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
</ul>
</body>
</html> View Code
結果：
center：交叉軸的中點對齊。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:20px/40px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
align-items: center;
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height:100px;
width: 200px;
}
#menu li.b{
height: 200px;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
</ul>
</body>
</html> View Code
結果：
baseline: 項目的第一行文字的基線對齊。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:20px/40px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
align-items: baseline; /**baseline: 項目的第一行文字的基線對齊。*/
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height:100px;
width: 200px;
}
#menu li.b{
height: 200px;
font-size: 40px;
}
#menu li.d{
height: 230px;
font-size: 40px;
line-height: 100px;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
<li class="d">4企業文化</li>
</ul>
</body>
</html> View Code
結果：
stretch（預設值）：如果項目未設定高度或設為auto，将占滿整個容器的高度。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:20px/40px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
align-items: stretch; /**stretch（預設值）：如果項目未設定高度或設為auto，将占滿整個容器的高度。。*/
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
width: 200px;
}
#menu li.b{
height: 200px;
font-size: 40px;
}
#menu li.d{
height: 230px;
font-size: 40px;
line-height: 100px;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
<li class="d">4企業文化</li>
</ul>
</body>
</html> View Code
結果：
2.4.6、align-content屬性
align-content屬性定義了多根軸線的對齊方式。如果項目隻有一根軸線，該屬性不起作用。
.box{align-content:flex-start|flex-end|center|space-between|space-around|stretch;} align-content與align-item類似，但是：
align-content對單行是沒有效果的。
該屬性可能取6個值。
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:14px/20px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
flex-wrap: wrap;
align-content: center;
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height:30px;
width: 200px;
}
#menu li.b{
width: 300px;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
</ul>
</body>
</html> View Code
結果：
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。是以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）：軸線占滿整個交叉軸。
align-content:center對單行是沒有效果的,而align-items:center不管是對單行還是多行都有效果,而在我們日常開發中用的比較多的就是align-items。
2.5、項目的屬性
以下6個屬性設定在項目上。
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
2.5.1 order屬性
order屬性定義項目的排列順序。數值越小，排列越靠前，預設為0。
.item{order:;}
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:14px/20px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height:30px;
width: 200px;
order: 10;
}
#menu li.b{
width: 300px;
order: 0;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
<li class="a">4公司簡介</li>
<li class="b">5商品展示</li>
<li class="c">6背景管理</li>
</ul>
</body>
</html> 結果：
2.5.2 flex-grow屬性
flex-grow屬性定義項目的放大比例，預設為0，即如果存在剩餘空間，也不放大。
.item{flex-grow:;/* default 0 */}
如果所有項目的flex-grow屬性都為1，則它們将等分剩餘空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩餘空間将比其他項多一倍。
當flex-grow為預設值0時的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:14px/20px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height:30px;
width:100px;
flex-grow: 0;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
<li class="a">4公司簡介</li>
<li class="b">5商品展示</li>
<li class="c">6背景管理</li>
</ul>
</body>
</html> View Code
結果：
當flex-grow為1時的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:14px/20px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height:30px;
width:100px;
flex-grow: 1;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
<li class="a">4公司簡介</li>
<li class="b">5商品展示</li>
<li class="c">6背景管理</li>
</ul>
</body>
</html> View Code
結果：
當flex-grow為2時的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:14px/20px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height:30px;
width:100px;
flex-grow: 1;
}
#menu li.b{
flex-grow: 2;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
<li class="a">4公司簡介</li>
<li class="b">5商品展示</li>
<li class="c">6背景管理</li>
</ul>
</body>
</html> View Code
運作結果：
2.5.3 flex-shrink屬性
flex-shrink屬性定義了項目的縮小比例，預設為1，即如果空間不足，該項目将縮小。
.item{flex-shrink:;/* default 1 */}
如果所有項目的flex-shrink屬性都為1，當空間不足時，都将等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。
負值對該屬性無效。
flex-shrink為0時不收縮示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:14px/20px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height:30px;
width:300px;
flex-shrink: 1;
}
#menu li.b{
flex-shrink: 0;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
<li class="a">4公司簡介</li>
<li class="b">5商品展示</li>
<li class="c">6背景管理</li>
</ul>
</body>
</html> 結果：
flex-shrink越大空間不足時收縮越多：
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:14px/20px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height:30px;
width:300px;
flex-shrink: 1;
}
#menu li.b{
flex-shrink: 2;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
<li class="a">4公司簡介</li>
<li class="b">5商品展示</li>
<li class="c">6背景管理</li>
</ul>
</body>
</html> View Code
結果：
2.5.4 flex-basis屬性
flex-basis屬性定義了在配置設定多餘空間之前，項目占據的主軸空間（main size）。浏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即項目的本來大小。
.item{flex-basis:|auto;/* default auto */} 它可以設為跟width或height屬性一樣的值（比如350px），則項目将占據固定空間。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:14px/20px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height:30px;
width:100px;
}
#menu li.b{
flex-basis: 200px;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
<li class="a">4公司簡介</li>
<li class="b">5商品展示</li>
<li class="c">6背景管理</li>
</ul>
</body>
</html> 結果：
2.5.5 flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
.item{flex:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]} 該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為浏覽器會推算相關值。
flex：none | <flex-grow> <flex-shrink > || <flex-basis>
功能：設定或檢索彈性盒模型對象的子元素如何配置設定空間
适用于：flex子項
none： none關鍵字的計算值為: 0 0 auto
<flex-grow>： 用來指定擴充比率，即剩餘空間是正值時此「flex子項」相對于「flex容器」裡其他「flex子項」能配置設定到空間比例。
在「flex」屬性中該值如果被省略則預設為「1」
<flex-shrink>： 用來指定收縮比率，即剩餘空間是負值時此「flex子項」相對于「flex容器」裡其他「flex子項」能收縮的空間比例。
在收縮的時候收縮比率會以伸縮基準值權重
在「flex」屬性中該值如果被省略則預設為「1」
<flex-basis>： 用來指定伸縮基準值，即在根據伸縮比率計算出剩餘空間的分布之前，「flex子項」長度的起始數值。
在「flex」屬性中該值如果被省略則預設為「0%」
在「flex」屬性中該值如果被指定為「auto」，則伸縮基準值的計算值是自身的 <width> 設定，如果自身的寬度沒有定義，則長度取決于内容。
示例：如下情況每個元素的計算寬是多少？
<ul class="flex">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<style>
.flex{display:flex;width:800px;margin:0;padding:0;list-style:none;}
.flex :nth-child(1){flex:1 1 300px;}
.flex :nth-child(2){flex:2 2 200px;}
.flex :nth-child(3){flex:3 3 400px;}
</style> 本例定義了父容器寬（即主軸寬）為800px，由于子元素設定了伸縮基準值flex-basis，相加300+200+400=900，那麼子元素将會溢出900-800=100px；
由于同時設定了收縮因子，是以權重綜合可得300*1+200*2+400*3=1900px；
于是我們可以計算a,b,c将被移除的溢出量是多少：
a被移除溢出量：(300*1/1900)*100，即約等于16px
b被移除溢出量：(200*2/1900)*100，即約等于21px
c被移除溢出量：(400*3/1900)*100，即約等于63px
最後a,b,c的實際寬度分别為：300-16=284px, 200-21=179px, 400-63=337px
可見算法比較麻煩，簡單的做法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
html,
body {
height: 100%;
}
#menu {
width: 980px;
margin: 0 auto;
display: flex;
/*目前塊為彈性盒*/
}
#menu li {
float: left;
}
#menu li a {
display: block;
height: 26px;
line-height: 26px;
border: 1px solid cornflowerblue;
margin-right: 2px;
text-decoration: none;
text-align: center;
}
.a {
flex: 1;
}
.b {
flex: 2;
}
.c {
flex: 3;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">
<a href="#" class="item">公司簡介</a>
</li>
<li class="b">
<a href="#" class="item">商品展示</a>
</li>
<li class="c">
<a href="#" class="item">背景管理</a>
</li>
</ul>
</body>
</html> 運作結果：
2.5.6 align-self屬性
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆寫align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
.item{align-self:auto|flex-start|flex-end|center|baseline|stretch;} 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:14px/20px "Microsoft YaHei";
}
html,
body {
height: 100%;
}
#menu {
margin: 0 auto;
background: lightgreen;
height: 300px;
display: flex; /**指定為彈性盒容器*/
align-items: center;
}
#menu li {
margin: 5px;
background: lightgoldenrodyellow;
height:30px;
width:100px;
}
#menu li.b{
flex-basis: 200px;
align-self: flex-end;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">1公司簡介</li>
<li class="b">2商品展示</li>
<li class="c">3背景管理</li>
<li class="a">4公司簡介</li>
<li class="b">5商品展示</li>
<li class="c">6背景管理</li>
</ul>
</body>
</html> 結果：
該屬性可能取6個值，除了auto，其他都與align-items屬性完全一緻。
2.6、flex 布局應用
2.6.1、flex設定元素垂直居中對齊
在之前的一篇文章中記載過如何垂直居中對齊，方法有很多，但是在學習了flex布局之後，垂直居中更加容易實作
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.demo {
width: 500px;
height: 300px;
background: lightgreen;
display: flex; /*設定為flex布局*/
justify-content: center; /*水準居中*/
align-items: center; /*垂直居中*/
}
</style>
</head>
<body>
<div class="demo">
<img src="../img/tv.png"/>
</div>
</body>
</html> 運作結果：
2.6.2、用flex布局制作導航欄
以前在寫導航欄的時候，總是用float或者display：inline-block實作，但是這兩種方法都會有各種問題，比如浮動會影響父元素以及兄弟元素的樣式，需要清除浮動
現在用flex會很友善，并且是彈性布局
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font:20px/40px "Microsoft YaHei";
}
ul{
display: flex;
}
li{
flex: 1;
text-align: center;
background: lightsalmon;
color: white;
border-right: 1px solid #fff;
}
li:last-child{
border-right: 0;
}
</style>
</head>
<body>
<ul id="menu">
<li class="a">公司簡介</li>
<li class="b">商品展示</li>
<li class="c">背景管理</li>
</ul>
</body>
</html> 效果如圖所示：
我們隻要在HTML代碼裡面多加兩個li元素，導航便彈性變化
不需要改變css代碼，即可在導航欄中增加項目
2.6.3、圖文清單
有時候需要做成左圖右文字的樣式，如下圖所示：
此時用flex會很友善
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多列布局</title>
<style type="text/css">
.demo {
display: flex; /*設定為flex布局*/
justify-content: space-around;
margin-bottom: 10px;
border: 2px solid #528CE0;
padding: 10px;
}
.demo > div {
flex: none;
}
.left {
width: 30%;
width: 30%;
background: #d4cdcd;
}
.right {
width: 60%;
height: 200px;
}
.btn{
background: #528CE0;
color: white;
width: 70px;
}
</style>
</head>
<body>
<div class="demo">
<div class="left"></div>
<div class="right">
<p>産品标題産品标題産品标題</p>
<span>總人數99</span>
<span>剩餘人數33</span>
<div class="btn">立即參與</div>
</div>
</div>
<div class="demo">
<div class="left"></div>
<div class="right">
<p>産品标題産品标題産品标題</p>
<span>總人數99</span>
<span>剩餘人數33</span>
<div class="btn">立即參與</div>
</div>
</div>
<div class="demo">
<div class="left"></div>
<div class="right">
<p>産品标題産品标題産品标題</p>
<span>總人數99</span>
<span>剩餘人數33</span>
<div class="btn">立即參與</div>
</div>
</div>
<div class="demo">
<div class="left"></div>
<div class="right">
<p>産品标題産品标題産品标題</p>
<span>總人數99</span>
<span>剩餘人數33</span>
<div class="btn">立即參與</div>
</div>
</div>
</body>
</html> 運作結果：
甚至有多列布局，
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多列布局</title>
<style type="text/css">
.demo{
width: 600px;
height: 150px;
border: 1px solid #b7b2b7;
margin: 30px auto;
padding-top: 17px;
display: flex; /*設定為flex布局*/
justify-content: space-around;
}
.demo > div{
flex: none;
}
</style>
</head>
<body>
<div class="demo">
<div class="left"></div>
<div class="center">
<p>description</p>
<p>description</p>
<p>description</p>
<span>description</span>
</div>
<div class="btn">确認</div>
<div class="btn">取消</div>
</div>
<div class="demo">
<div class="left"></div>
<div class="center">
<p>description</p>
<p>description</p>
<p>description</p>
<span>description</span>
</div>
<div class="btn">确認</div>
<div class="btn">取消</div>
</div>
<div class="demo">
<div class="left"></div>
<div class="center">
<p>description</p>
<p>description</p>
<p>description</p>
<span>description</span>
</div>
<div class="btn">确認</div>
<div class="btn">取消</div>
</div>
</body>
</html> 結果：
2.6.4、固定百分比布局
HTML代碼：
<div class="demo">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div> (1) 等分布局：
CSS代碼：
.demo{
display: flex;
}
.item{
flex: 1;
} （2）某一個固定
CSS代碼：
.demo{
display: flex;
}
.item{
flex: 1;
}
.item2{
flex: 0 0 50%;
} （3）某兩個固定
CSS代碼：
.demo{
display: flex;
}
.item{
flex: 1;
}
.item2{
flex: 0 0 50%;
}
.item4{
flex: 0 0 20%;
} （4）三個固定
CSS代碼：
.demo{
display: flex;
}
.item{
flex: 1;
}
.item1{
flex: 0 0 10%;
}
.item2{
flex: 0 0 50%;
}
.item4{
flex: 0 0 20%;
} 2.6.5. 聖杯布局
HTML代碼：
<div class="demo">
<div class="header">頭部</div>
<div class="body">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="footer">底部</div>
</div> CSS代碼： .demo{
display: flex;
flex-direction: column;
}
.demo div{
flex: 1;
}
.body{
display: flex;
}
.header,.footer,.left,.right{
flex: 0 0 20%!important;
} 2.6.6、輸入框布局
有時需要在輸入框的前部添加提示，或者後部添加按鈕，如圖所示：
HTML代碼： <div class="demo">
<span class="tip"></span>
<input type="text" name="" />
<button>search</button>
</div> CSS代碼： .demo{
display: flex;
}
input{
flex:1;
} 2.6.7、 底部footer固定在底部，但是不是fixed定位
頁面會經常用到固定的底欄，但是當頁面内容過少時，footer會到頁面中間，下面用flex來解決
HTML代碼：
<div class="demo">
<div class="main">這是主要内容</div>
<div class="footer">這是底部</div>
</div>
CSS代碼：
.demo{
display: flex;
flex-direction: column;
}
.main{
flex: 1;
}
.footer{
width: 100%;
height: 120px;
}
2.6.8. 流式布局
如下如所示：
HTML代碼如下：
<div class="demo">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
CSS代碼：
.demo{
width: 258px;
height: 300px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.item{
flex: 0 0 33.333333%;
height: 80px;
box-sizing: border-box;
}
2.7、小節
a)、彈性布局預設不改變項目的寬度，但是它預設改變項目的高度。如果項目沒有顯式指定高度，就将占據容器的所有高度。
b)、雖然 Flexbox 非常适合縮放，對齊和重新排序元素，但以下情況應該盡量避免使用 Flexbox 布局：
1.整體頁面布局
2.完全支援舊浏覽器的網站
三、流式布局（Fluid）
固定布局和流式布局在網頁設計中最常用的兩種布局方式。固定布局能呈現網頁的原始設計效果，流式布局則不受視窗寬度影響，流式布局使用百分比寬度來限定布局元素，這樣可以根據用戶端分辨率的大小來進行合理的顯示。
固定布局效果：
流式布局效果：
利用前面的知識點可以實作這兩種布局，這裡就不去實作了
三、瀑布流布局
瀑布流布局是流式布局的一種。是當下比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，随着頁面滾動條向下滾動，這種布局還會不斷加載資料塊并附加至目前尾部。最早采用此布局的網站是Pinterest，逐漸在國内流行開來。
3.1、常見瀑布流布局網站
鼻祖：Pinterest
通用類：豆瓣市集，花瓣網，我喜歡，讀圖知天下
美女圖檔：圖麗網
時尚資訊類：看潮網
時尚購物類：蘑菇街，美麗說，人人逛街，卡當網
品牌推廣類：凡客達人
家居o2o類：新巢網小貓家
微網誌社交類： 都愛看
搞笑圖檔類：道趣兒
藝術收藏類：微藝術
潮流圖文分享：荷都分享網
3.2、特點
優點
1、有效的降低了界面複雜度，節省了空間：我們不再需要臃腫複雜的頁碼導航連結或按鈕了。
2、對觸屏裝置來說，互動方式更符合直覺：在移動應用的互動環境當中，通過向上滑動進行滾屏的操作已經成為最基本的使用者習慣，而且所需要的操作精準程度遠遠低于點選連結或按鈕。
3、更高的參與度：以上兩點所帶來的互動便捷性可以使使用者将注意力更多的集中在内容而不是操作上，進而讓他們更樂于沉浸在探索與浏覽當中。
缺點
1. 有限的用例：
無限滾動的方式隻适用于某些特定類型産品當中一部分特定類型的内容。
例如，在電商網站當中，使用者時常需要在商品清單與詳情頁面之間切換，這種情況下，傳統的、帶有頁碼導航的方式可以幫助使用者更穩妥和準确的回到某個特定的清單頁面當中。
2. 額外的複雜度：
那些用來打造無限滾動的JS庫雖然都自稱很容易使用，但你總會需要在自己的産品中進行不同程度的定制化處理，以滿足你們自己的需求;另外這些JS庫在浏覽器和裝置相容性等方面的表現也參差不齊，你必須做好充分的測試與調整工作。
3. 再見了，頁腳：
如果使用了比較典型的無限滾動加載模式，這就意味着你可以和頁腳說拜拜了。
最好考慮一下頁腳對于你的網站，特别是使用者的重要性;如果其中确實有比較重要的内容或連結，那麼最好換一種更傳統和穩妥的方式。
千萬不要耍弄你的使用者，當他們一次次的浏覽到頁面底部，看到頁腳，卻因為自動加載的内容突然出現而無論如何都無法點選頁腳中的連結時，他們會變的越發憤怒。
5. SEO：
集中在一頁當中動态加載資料，與一頁一頁的輸出相比，究竟那種方式更利于SEO，這是你必須考慮的問題。對于某些以類型網站來說，在這方面進行冒險是很不劃算的。
6. 關于頁面數量的印象：
其實站在使用者的角度來看，這一點并非負面;不過，如果對于你的網站來說，通過更多的内容頁面展示更多的相關資訊(包括廣告)是很重要的政策，那麼單頁無限滾動的方式對你并不适用。
3.3、masonry實作瀑布流布局
masonry是一個響應式網格布局庫（非jQuery）。（Cascading grid layout library）
如果使用CSS+JavaScript當然可以實作瀑布流布局，但相對麻煩，masonry是一個javascript插件，通過該插件可以輕松實作瀑布流布局，和CSS中float的效果不太一樣的地方在 于，float先水準排列，然後再垂直排列，使用Masonry則垂直排列元素，然後将下一個元素放置到網格中的下一個開發區域。這種效果可以最小化處理 不同高度的元素在垂直方向的間隙。
官網：http://masonry.desandro.com/
源碼：https://github.com/desandro/masonry
3.3.1、下載下傳并引用masonry
可以去官網或github下載下傳“masonry.pkgd.min.js”，将下載下傳到的插件添加到項目中，并在頁面中添加引用，如下所示：
<script src="js/masonry/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script> - masonry.pkgd.js un-minified
- masonry.pkgd.min.js minified
CDN：
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script> 3.3.2、準備内容
在頁面中使用HTML+CSS準備需要使用瀑布流顯示的内容，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流布局</title>
<style type="text/css">
#grid {
width: 1000px;
margin: 0 auto;
}
.grid-item {
width: 200px;
float: left;
}
.a {
background: lightblue;
height: 200px;
}
.b {
background: lightcoral;
height: 300px;
}
.c {
background: lightgreen;
height: 500px;
}
.d {
background: lightsalmon;
height: 350px;
}
.e {
background: lightseagreen;
height: 150px;
}
</style>
</head>
<body>
<div id="grid">
<div class="grid-item a">
</div>
<div class="grid-item b">
</div>
<div class="grid-item a">
</div>
<div class="grid-item b">
</div>
<div class="grid-item a">
</div>
<div class="grid-item b">
</div>
<div class="grid-item a">
</div>
<div class="grid-item b">
</div>
<div class="grid-item a">
</div>
<div class="grid-item b">
</div>
<div class="grid-item a">
</div>
<div class="grid-item b">
</div>
<div class="grid-item c">
</div>
<div class="grid-item d">
</div>
<div class="grid-item e">
</div>
<div class="grid-item c">
</div>
<div class="grid-item d">
</div>
<div class="grid-item e">
</div>
<div class="grid-item c">
</div>
<div class="grid-item d">
</div>
<div class="grid-item e">
</div>
<div class="grid-item c">
</div>
<div class="grid-item d">
</div>
<div class="grid-item e">
</div>
<div class="grid-item c">
</div>
<div class="grid-item d">
</div>
<div class="grid-item e">
</div>
<div class="grid-item c">
</div>
<div class="grid-item d">
</div>
<div class="grid-item e">
</div>
</div>
<script src="js/masonry/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html> 沒有使用瀑布流布局時的效果：
3.3.3、初始化插件
使用jQuery：
$('.grid').masonry({
// options...
itemSelector: '.grid-item',
columnWidth: 200
}); 原生JavaScript：
// init with element
var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
// options...
itemSelector: '.grid-item',
columnWidth: 200
}); 使用HTML屬性：
<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
<div class="grid-item"></div>
<div class="grid-item"></div>
...
</div> 常用屬性如下：
itemSelector : '.item',//瀑布流布局中的單項選擇器
columnWidth : 240 ,//一列的寬度
isAnimated:true,//使用jquery的布局變化，是否啟用動畫
animationOptions:{
//jquery animate屬性 漸變效果 Object { queue: false, duration: 500 }
},
gutterWidth:0,//列的間隙 Integer
isFitWidth:true,//是否适應寬度 Boolean
isResizableL:true,//是否可調整大小 Boolean
isRTL:false,//是否使用從右到左的布局 Boolean 初始化代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流布局</title>
<style type="text/css">
#grid {
width: 1000px;
margin: 0 auto;
}
.grid-item {
width: 200px;
float: left;
}
.a {
background: lightblue;
height: 200px;
}
.b {
background: lightcoral;
height: 300px;
}
.c {
background: lightgreen;
height: 500px;
}
.d {
background: lightsalmon;
height: 350px;
}
.e {
background: lightseagreen;
height: 150px;
}
</style>
</head>
<body>
<div id="grid">
<div class="grid-item a">
</div>
<div class="grid-item b">
</div>
<div class="grid-item a">
</div>
<div class="grid-item b">
</div>
<div class="grid-item c">
</div>
<div class="grid-item d">
</div>
<div class="grid-item e">
</div>
<div class="grid-item c">
</div>
<div class="grid-item d">
</div>
<div class="grid-item a">
</div>
<div class="grid-item b">
</div>
<div class="grid-item a">
</div>
<div class="grid-item b">
</div>
<div class="grid-item a">
</div>
<div class="grid-item b">
</div>
<div class="grid-item d">
</div>
<div class="grid-item e">
</div>
<div class="grid-item c">
</div>
<div class="grid-item d">
</div>
<div class="grid-item e">
</div>
<div class="grid-item a">
</div>
<div class="grid-item b">
</div>
<div class="grid-item c">
</div>
<div class="grid-item d">
</div>
<div class="grid-item e">
</div>
<div class="grid-item c">
</div>
<div class="grid-item e">
</div>
<div class="grid-item c">
</div>
<div class="grid-item d">
</div>
<div class="grid-item e">
</div>
</div>
<script src="js/masonry/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var msnry = new Masonry('#grid', {
itemSelector: '.grid-item',
columnWidth: 200
});
</script>
</body>
</html> 運作結果：
3.3.4、使用了圖檔的瀑布流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流布局</title>
<style type="text/css">
#grid {
width: 1000px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="grid">
<div class="grid-item">
<a href="#">
<img src="img/h/h(1).jpg" width="200" />
</a>
</div>
<div class="grid-item">
<a href="#">
<img src="img/h/h(2).jpg" width="200" />
</a>
</div>
<div class="grid-item">
<a href="#">
<img src="img/h/h(3).jpg" width="200" />
</a>
</div>
<div class="grid-item">
<a href="#">
<img src="img/h/h(4).jpg" width="200" />
</a>
</div>
<div class="grid-item">
<a href="#">
<img src="img/h/h(11).jpg" width="200" />
</a>
</div>
<div class="grid-item">
<a href="#">
<img src="img/h/h(12).jpg" width="200" />
</a>
</div>
<div class="grid-item">
<a href="#">
<img src="img/h/h(5).jpg" width="200" />
</a>
</div>
<div class="grid-item">
<a href="#">
<img src="img/h/h(6).jpg" width="200" />
</a>
</div>
<div class="grid-item">
<a href="#">
<img src="img/h/h(7).jpg" width="200" />
</a>
</div>
<div class="grid-item">
<a href="#">
<img src="img/h/h(8).jpg" width="200" />
</a>
</div>
<div class="grid-item">
<a href="#">
<img src="img/h/h(11).jpg" width="200" />
</a>
</div>
<div class="grid-item">
<a href="#">
<img src="img/h/h(12).jpg" width="200" />
</a>
</div>
<div class="grid-item">
<a href="#">
<img src="img/h/h(9).jpg" width="200" />
</a>
</div>
<div class="grid-item">
<a href="#">
<img src="img/h/h(10).jpg" width="200" />
</a>
</div>
<div class="grid-item">
<a href="#">
<img src="img/h/h(11).jpg" width="200" />
</a>
</div>
<div class="grid-item">
<a href="#">
<img src="img/h/h(12).jpg" width="200" />
</a>
</div>
</div>
<script src="js/masonry/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
var msnry = new Masonry('#grid', {
itemSelector: '.grid-item',
columnWidth: 200
});
}
</script>
</body>
</html> 運作結果：
注意：上面的示例中我們使用了window.onload事件，原因是如果圖檔沒有加載完成就執行瀑布流布局會引起堆疊的問題，其實就是初始化是沒有檢測到圖檔的高度，window.onload在有許多圖檔的環境下會有性能問題，這裡給大家介紹另一個元件。
3.3.5、圖檔基礎
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖檔</title>
</head>
<body>
<img src="#" lowsrc="../img/mm.jpg" alt="家" title="家俱" longdesc="http://www.baidu.com" onload="console.log('加載完成a')" onerror="console.log('加載失敗a')" />
<img src="#" lowsrc="../img/mm.jpg" alt="家" title="家俱" longdesc="http://www.baidu.com" onload="console.log('加載完成b')" onerror="this.src='../img/phone.png';" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var img=$("<img src='../img/css_sprites.png'/>");
img.load(function(){
console.log('圖檔加載完成！');
$("body").append(img);
});
</script>
</body>
</html> 結果：
3.4、圖檔加載處理
3.4.1、imagesLoaded 圖檔加載進度監聽
imagesLoaded 是一個用于來檢測網頁中的圖檔是否載入完成的 JavaScript 工具庫。支援回調的擷取圖檔加載的進度，還可以綁定自定義事件。可以結合 jQuery、RequireJS 使用。
官網：http://imagesloaded.desandro.com/
源碼：https://github.com/desandro/imagesloaded
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>imagesLoaded – 檢測網頁中的圖檔是否加載</title>
</head>
<body>
<div id="div1">
<img src="img/h/h(2).jpg" width="300" /><img src="img/h/h(1).jpg" width="300" />
</div>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/imagesloaded-master/imagesloaded.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
<script>
imagesLoaded(document.querySelector('#div1'), function(instance) {
alert('所有的圖檔都加載完成了');
});
$('#div1').imagesLoaded()
.always(function(instance) {
console.log('all images loaded');
})
.done(function(instance) {
console.log('all images successfully loaded');
})
.fail(function() {
console.log('all images loaded, at least one is broken');
})
.progress(function(instance, image) {
var result = image.isLoaded ? 'loaded' : 'broken';
console.log('image is ' + result + ' for ' + image.img.src);
});
</script>
</body>
</html> 運作結果：
示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>imagesLoaded – 檢測網頁中的圖檔是否加載</title>
</head>
<body>
<div id="div1">
<h2 id="msg"></h2>
<img src="../img/h/h(2).jpg" width="300" /><img src="../img/h/h(1).jpg" width="300" />
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319210707776-403119185.png" alt="" /></p>
<p>管理資訊系統登入界面：</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319210724979-1119915147.jpg" alt="" /></p>
<p>管理資訊系統背景界面：</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319210738432-854332365.jpg" alt="" /></p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201704/63651-20170403153745066-468375996.png" alt="" /></p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201704/63651-20170403153851988-693921773.png" alt="" /></p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201704/63651-20170403153959957-1916226567.png" alt="" /></p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170320102945752-510492367.png" alt="" /></p>
<p>背景UI源檔案效果預覽1.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211458479-1573731955.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽2.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211514635-1085976697.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽3.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211522495-367520285.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽4.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211533416-313715133.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽5.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211601260-1282800119.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽6.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211651541-257820397.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽7.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211733963-600455455.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽8.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211741229-375627068.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽9.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211747495-1038741445.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽10.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211821541-1870563995.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽11.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211847526-88858662.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽12.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211918901-1487416243.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽13.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211935198-1455577157.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽14.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211939698-2023943995.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽15.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211955979-1280535056.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽16.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212002260-769742404.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽17.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212019526-1867955856.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽18.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212027198-1710146675.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽19.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212033088-1858074339.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽20.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212038948-1018032788.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽21.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212044448-485785412.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽22.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212050620-2069625287.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽23.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212055323-72502592.jpg" alt="" /></p>
<p> </p>
<p> </p>
<p>背景UI源檔案效果預覽24.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212101307-1670477572.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽25.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212107041-1752314202.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽26.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212113573-843908032.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽27.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212119479-1961410540.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽28.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212124588-2050526211.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽29.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212133963-345654335.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽30.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212139651-2085714868.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽31.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212209963-1505909711.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽32.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212217323-1285298741.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽33.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212224932-1909112377.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽34.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212234276-1478200637.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽35.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212535416-746129132.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽36.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212541354-451500014.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽37.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212613760-844809474.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽38.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212620557-776804426.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽39.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212628276-1531913723.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽40.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212636713-1576030888.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽41.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212645213-1328314494.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽42.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212653916-1728096300.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽43.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212702307-1916172043.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽44.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212711729-767609725.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽45.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212720245-1474820956.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽46.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212728979-1033613408.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽47.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212736995-992230524.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽48.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212749260-266950659.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽49.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212757245-1650723680.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽50.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212822463-1289739165.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽51.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212830416-720826789.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽52.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212840620-623419195.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽53.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212851073-2070968428.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽54.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212858885-721901521.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽55.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212907182-117093308.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽56.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212914635-418040247.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽57.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212922385-1216341652.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽58.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212930291-527202617.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽59.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212937479-238445367.jpg" alt="" /></p>
<p> </p>
<p>背景UI源檔案效果預覽60.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212949495-1168504867.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽61.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212957495-587805195.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽62.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213006166-887235383.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽63.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213013995-1880131966.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽64.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213022463-479679065.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽65.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213031854-307158776.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽66.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213038838-982540405.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽67.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213049307-210755769.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽68.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213056651-88654019.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽69.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213103651-1340111007.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽70.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213111979-1990254477.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽71.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213123120-42377418.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽72.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213130307-473956631.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽73.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213141307-8268135.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽74.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213153510-644201557.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽75.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213201666-1574964734.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽76.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213212198-725946488.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽77.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213219276-568665808.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽78.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213227166-1096207415.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽78.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213234291-512151309.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽80.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213241213-1353552770.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽81.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213248166-1202711403.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽82.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213258245-1102416390.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽83.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213305838-865548337.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽84.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213312166-424235563.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽85.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213320182-310152719.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽86.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213330495-1303439323.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽87.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213338557-1213240156.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽88.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213346510-1570198481.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽89.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213356448-1692105900.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽90.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213404604-910791420.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽91.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213411526-539349830.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽92.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213429401-718695402.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽93.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213448979-907316264.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽94.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213500870-448776637.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽95.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213508682-657176788.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽96.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213518026-1052811140.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽97.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213525932-1326458502.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽98.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213533370-1038572861.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽99.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213540807-1750200096.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽100.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213548229-1349456854.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽101.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213555620-1293747046.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽102.jpg</p>
<p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213602541-1840125225.jpg" alt="" /></p>
<p>背景UI源檔案效果預覽103.jpg</p>
</div>
<script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/imagesloaded-master/imagesloaded.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
<script>
imagesLoaded(document.querySelector('#div1'), function(instance) {
//alert('所有的圖檔都加載完成了');
});
var count = $("#div1 img").size();
var i = 0;
$('#div1').imagesLoaded()
.always(function(instance) {
console.log('all images loaded');
})
.done(function(instance) {
console.log('all images successfully loaded');
})
.fail(function() {
console.log('all images loaded, at least one is broken');
})
.progress(function(instance, image) {
i++;
$("#msg")[0].innerHTML +=Math.round(i * 100 / count) + "%" + " ->";
var result = image.isLoaded ? 'loaded' : 'broken';
console.log('image is ' + result + ' for ' + image.img.src);
});
</script>
</body>
</html> View Code
效果：
3.4.2、圖檔延遲加載
jQuery圖檔延遲加載插件jQuery.lazyload,使用延遲加載在可提高網頁下載下傳速度。在某些情況下，它也能幫助減輕伺服器負載。
基于 jQuery 的圖檔延遲加載插件，在使用者滾動頁面到圖檔之後才進行加載。對于有較多的圖檔的網頁，使用圖檔延遲加載，能有效的提高頁面加載速度。
官網：https://appelsiini.net/projects/lazyload/
幫助：http://code.ciaoca.com/jquery/lazyload/
注意事項：
需要真正實作圖檔延遲加載，必須将真實圖檔位址寫在 data-original 屬性中。若 src 與 data-original 相同，則隻是一個特效而已，并不達到延遲加載的功能。 使用方法
引用jquery和jquery.lazyload.js到你的頁面
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script> html圖檔調用方法
為圖檔加入樣式lazy 圖檔路徑引用方法用data-original
<img class="lazy" data-original="img/bmw_m1_hood.jpg">
<img class="lazy" data-original="img/bmw_m1_side.jpg">
<img class="lazy" data-original="img/viper_1.jpg">
<img class="lazy" data-original="img/viper_corner.jpg">
<img class="lazy" data-original="img/bmw_m3_gt.jpg">
<img class="lazy" data-original="img/corvette_pitstop.jpg"> js出始化lazyload并設定圖檔顯示方式
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});
</script> 在圖檔中也可以不使用 class="lazy"，初始化時使用：
$("img").lazyload({effect: "fadeIn"}); 這樣就可以對全局的圖檔都有效！
如果想提載入圖檔，可以使用 threshold 進行設定，
$("img.lazy").lazyload({ threshold :180}); 以上執行個體的含義是：在圖檔距離螢幕180px時提前載入：
引入
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script> 路徑依據實際目錄來确定。
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});
</script> 圖檔引用lazyload 方式
<img class="lazy" data-original="img/bmw_m1_hood.jpg" /> 參數設定
$("img.lazy").lazyload({
placeholder : "img/grey.gif", //用圖檔提前占位
// placeholder,值為某一圖檔路徑.此圖檔用來占據将要加載的圖檔的位置,待圖檔加載時,占位圖則會隐藏
effect: "fadeIn", // 載入使用何種效果
// effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
threshold: 200, // 提前開始加載
// threshold,值為數字,代表頁面高度.如設定為200,表示滾動條在離目标位置還有200的高度時就開始加載圖檔,可以做到不讓使用者察覺
event: 'click', // 事件觸發時才加載
// event,值有click(點選),mouseover(滑鼠劃過),sporty(運動的),foobar(…).可以實作滑鼠莫過或點選圖檔才開始加載,後兩個值未測試…
container: $("#container"), // 對某容器中的圖檔實作效果
// container,值為某容器.lazyload預設在拉動浏覽器滾動條時生效,這個參數可以讓你在拉動某DIV的滾動條時依次加載其中的圖檔
failurelimit : 10 // 圖檔排序混亂時
// failurelimit,值為數字.lazyload預設在找到第一張不在可見區域裡的圖檔時則不再繼續加載,但當HTML容器混亂的時候可能出現可見區域内圖檔并沒加載出來的情況,failurelimit意在加載N張可見區域外的圖檔,以避免出現這個問題.
}); 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img {
display: block;
margin-bottom: 500px;
}
</style>
</head>
<body>
<div id="div1">
<img data-original="../img/animal/1.jpg" src="../demo06_css303/daddcart.jpg"/>
<img data-original="../img/animal/2.jpg" src="../demo06_css303/daddcart.jpg"/>
<img data-original="../img/animal/3.jpg" src="../demo06_css303/daddcart.jpg"/>
<img data-original="../img/animal/4.jpg" />
<img data-original="../img/animal/5.jpg" />
<img data-original="../img/animal/6.jpg" />
<img data-original="../img/animal/7.jpg" />
<img data-original="../img/animal/8.jpg" />
<img data-original="../img/animal/9.jpg" />
<img data-original="../img/animal/10.jpg" />
<img data-original="../img/animal/11.jpg" />
<img data-original="../img/animal/12.jpg" />
</div>
<script src="../js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery_lazyload197/jquery.lazyload.min.js?v=1.9.7" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("#div1 img").lazyload({
"effect":"fadeIn",
"effectspeed":"3000"
});
</script>
</body>
</html> 結果：
3.5、Infinite Scroll 滾動分頁
Infinite Scroll也是基于jQuery插件，是一個用于滾動分頁的插件（當移動滾動條時将動态加載更多内容），有網友稱這種效果為”無重新整理無分頁完美瀑布流”展現方式。
官網：http://infinite-scroll.com/
源碼：https://github.com/infinite-scroll/infinite-scroll
常用屬性：
$('#masonny-div').infinitescroll({
navSelector : "#next", // 頁面分頁元素(成功後會被隐藏)
nextSelector : "#next a", // 需要點選的下一頁連結，和2的html要對應
itemSelector : ".item" , // ajax回來之後，每一項的selecter
animate : true, //加載完畢是否采用動态效果
extraScrollPx: 100, //向下滾動的像素，必須開啟動态效果
// debug : true, //調試的時候，可以打開
bufferPx : 5, //提示語展現的時長，數字越大，展現時間越短
loading: {
finishedMsg: '沒有更多内容了', //當加載失敗，或者加載不出内容之後的提示語
img: 'loading-new.gif', //自定義loadding的動畫圖
msgText : '正在加載中...', //加載時的提示語
},
},
function( newElements， opt ) {
//成功後執行自定義的函數
//如果需要對新内容進行加工，就在這裡實作
}
}; 屬性與事件官網有詳細的說明這裡隻列出來了部分，下面是官網列出的選擇：
$('.selector').infinitescroll({
loading: {
finished: undefined,
finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>",
img: null,
msg: null,
msgText: "<em>Loading the next set of posts...</em>",
selector: null,
speed: 'fast',
start: undefined
},
state: {
isDuringAjax: false,
isInvalidPage: false,
isDestroyed: false,
isDone: false, // For when it goes all the way through the archive.
isPaused: false,
currPage: 1
},
behavior: undefined,
binder: $(window), // used to cache the selector for the element that will be scrolling
nextSelector: "div.navigation a:first",
navSelector: "div.navigation",
contentSelector: null, // rename to pageFragment
extraScrollPx: 150,
itemSelector: "div.post",
animate: false,
pathParse: undefined,
dataType: 'html',
appendCallback: true,
bufferPx: 40,
errorCallback: function () { },
infid: 0, //Instance ID
pixelsFromNavToBottom: undefined,
path: undefined, // Can either be an array of URL parts (e.g. ["/page/", "/"]) or a function that accepts the page number and returns a URL
maxPage:undefined // to manually control maximum page (when maxPage is undefined, maximum page limitation is not work)
}); 3.5.1、異步加載普通頁面
p1.html頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.item {
height: 200px;
}
</style>
</head>
<body>
<h2>産品清單</h2>
<div id="items">
<p class="item">産品一</p>
<p class="item">産品一</p>
<p class="item">産品一</p>
<p class="item">産品一</p>
<p class="item">産品一</p>
<p class="item">産品一</p>
</div>
<a href="p2.html" id="next">下一頁</a>
<script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/infinite-scroll/jquery.infinitescroll.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('#items').infinitescroll({
navSelector: "#next", // 頁面分頁元素(成功後會被隐藏)
nextSelector: "a#next", // 需要點選的下一頁連結，和2的html要對應
itemSelector: ".item", // ajax回來之後，每一項的selecter，比如每篇文章都有item這個class
debug: true, //是否調試
dataType: 'html', //資料類型
maxPage: 3, //最大頁數
path: function(index) { //路徑
return "p" + index + ".html";
}
}, function(newElements, data, url) { //成功後的回調
//console.log("路徑：" + url);
$(newElements).css('background-color', '#ffef00');
// $(this).append(newElements);
});
</script>
</body>
</html> p2.html頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>P2</title>
</head>
<body>
<p class="item">産品二</p>
<p class="item">産品二</p>
<p class="item">産品二</p>
<p class="item">産品二</p>
<p class="item">産品二</p>
<p class="item">産品二</p>
</body>
</html> p3.html頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>P3</title>
</head>
<body>
<p class="item">産品三</p>
<p class="item">産品三</p>
<p class="item">産品三</p>
<p class="item">産品三</p>
<p class="item">産品三</p>
<p class="item">産品三</p>
</body>
</html> 運作效果：
3.5.2、異步加載json并解析
m1.html頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相冊</title>
<style type="text/css">
.item {
float: left;
min-height: 300px;
}
</style>
</head>
<body>
<h2>相冊</h2>
<div id="items">
<p class="item"><img src="../img/i/1.jpg" /></p>
<p class="item"><img src="../img/i/2.jpg" /></p>
<p class="item"><img src="../img/i/3.jpg" /></p>
<p class="item"><img src="../img/i/4.jpg" /></p>
<p class="item"><img src="../img/i/5.jpg" /></p>
<p class="item"><img src="../img/i/6.jpg" /></p>
</div>
<a href="m2.json" id="next"></a>
<script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/infinite-scroll/jquery.infinitescroll.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('#items').infinitescroll({
navSelector: "#next",
nextSelector: "a#next",
itemSelector: ".item",
debug: true,
dataType: 'json',
maxPage: 3,
appendCallback:false,
path: function(index) {
return "m" + index + ".json";
}
}, function(data) {
for(var i=0;i<data.length;i++){
$("<p class='item'><img src='../img/i/"+data[i]+".jpg' /></p>").appendTo("#items");
}
});
</script>
</body>
</html> m2.json資料：
[7,8,9,10,11,12] m3.json資料：
[13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30] 運作結果：
因為沒有使用瀑布流布局是以有點不規整，這裡主要示範分頁。
四、響應式布局（Responsive）
4.1、媒介類型
@media早在css2.1中就有了，用于判斷媒介類型，如screen螢幕，print列印機，projection投影儀，all表示所有，當然還有許多不常用的。可以指定CSS在什麼樣的媒介中應用，如隻在列印時應用某些樣式，如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列印</title>
<!--該樣式隻會應用在列印時-->
<style type="text/css" media="print">
.noprint
{
display:none;
}
div{
font-size:30px;
}
</style>
</head>
<body>
<div>
Installing Cordova Cordova command-line runs on Node.js and is available on NPM. Follow platform specific guides to install additional platform dependencies. Open a command prompt or Terminal, and type npm install -g cordova.
</div>
<button onclick="print();" class="noprint">列印</button>
</body>
</html> 不使用媒介時運作效果：
使用媒介時運作效果：
4.2、媒介查詢的應用位置（Media Queries）
a)、内部樣式
@media screen and (width:800px){ … }
b)、導入樣式
@import url(example.css) screen and (width:800px);
c)、連結樣式
<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />
d)、XML中應用樣式
<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>
4.3、Media Queries Hello World
在頁面上放一個層，當螢幕大小在100-640之間時顯示綠色，其它大小顯示藍色
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>媒介查詢</title>
<style type="text/css">
#div1 {
background: lightblue;
height: 100px;
}
@media only screen and (min-width: 100px) and (max-width: 640px) {
#div1 {
background: lightgreen;
height: 200px;
}
}
</style>
</head>
<body>
<div id="div1">
Hello World!
</div>
</body>
</html> 全屏時的運作效果：
縮小浏覽器的效果：
4.4、媒介查詢文法
@media queries是CSS3中引入的，不僅可以實作媒介類型的查詢可以實作裝置特性的查詢，可以簡單認為是對CSS2.1中的media的增強，基本文法如下：
@media [not|only] media_type and feature
not：取反操作
only：讓不支援media query的裝置但讀取media type類型的浏覽器忽略這個樣式
media_type：是媒介類型，具體如下：
feature：定義裝置特性，多數允許加字首min-，max-，多個條件可以使用and連接配接，and兩側需要空格。
常見寫法：
@media only screen and (min-width: 320px) and (max-width: 640px) {
} @media （min-device-width:1024px） and （max-width:989px），screen and （max-device-width:480px），（max-device-width:480px） and （orientation:landscape），（min-device-width:480px） and （max-device-width:1024px） and （orientation:portrait） {
CSS樣式...
} and表示與，條件要同時滿足；逗号表示或。
4.5、響應式栅格系統（Responsive）
在前面的布局中我們學習栅格系統，這裡通過媒介查詢實作響應式栅格系統，腳本如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>響應式栅格</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
font: 20px/20px "microsoft yahei";
}
div {
min-height: 100px;
}
.row {
width: 800px;
background: deepskyblue;
margin: 0 auto;
}
.row:after {
content: ' ';
display: table;
clear: both;
}
.col25 {
width: 25%;
background: lightgreen;
}
.col50 {
width: 50%;
background: lightcoral;
}
.col75 {
width: 75%;
background: lightblue;
}
[class*=col] {
float: left;
}
/*0-480手機*/
@media only screen and (max-width:480px) {
.row {
width: 100%;
}
[class*=col] {
float: none;
margin-top: 5px;
width: 100%;
}
}
/*480-960平闆，手機橫屏*/
@media only screen and (min-width: 480px) and (max-width: 960px) {
.row {
width: 480px;
}
}
/*960PC螢幕*/
@media only screen and (min-width:960px) {
.row {
width: 960px;
}
}
</style>
</head>
<body>
<div id="container">
<div id="header" class="row">
header
</div>
<div id="main" class="row">
<div id="left" class="col25">left</div>
<div id="center" class="col50">center</div>
<div id="right" class="col25">right</div>
</div>
<div id="footer" class="row">
footer
</div>
</div>
</body>
</html> 示例代碼中通過@media設定了多個斷點，當滿足條件時樣式會應用，達到響應式的目的，螢幕大960時：
480-960之間的效果：
在手機上模拟的效果：
4.6、respond.js
respond.js是一個用于讓IE8以下浏覽器支援@media queries的插件，也就是使用Respond.js能讓IE6-8支援CSS3 Media Query。Bootstrap裡面就引入了這個JS檔案，壓縮後隻有3KB。該腳本循環周遊頁面上的所有 CSS 引用，并使用媒體查詢分析 CSS 規則。然後，該腳本會監控浏覽器寬度變化，添加或删除與 CSS 中媒體查詢比對的樣式。最終結果是，能夠在原本不支援的浏覽器上運作媒體查詢。
要注意的問題：
if CSS files are encoded in UTF-8 with Byte-Order-Mark, they will not work with Respond.js in IE7 or IE8.
微軟的utf-8格式且BOM的檔案會出問題，BOM格式文檔頭3個位元組就是BOM，會影響程式對文檔的處理。
最近有測試發現IE8還是出現了問題，動畫@keyframe中的@符号造成的影響會使respond.js失效，是以，在使用respond.js時，盡量就不要用CSS3動畫。
下載下傳位址：https://github.com/scottjehl/Respond/
引入方法：
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<script src="respond.min.js"></script>
<![endif]--> 4.7、移動優先（Mobile First）
a）、桌面優先（優雅降級）
這是一種傳統的做法，開發項目時優先PC端，然後再通過一些hack的方法讓項目正常運作在移動端，所謂的降級可以簡單認為就是将一些資訊隐藏，因為移動端的可視範圍有限，必須給使用者提供簡潔核心的内容。
b)、移動優先（漸進增強）
a)、對于産品設計師，一個新産品先設計移動版，然後才是桌面版。
b)、對于工程師，一個新産品，先開發移動版，然後才是桌面版本。
這樣的好處是能把握好最核心最關鍵内容，讓界面簡潔。
練習
4.8、視區（viewport）
4.8.1、需要設定viewport的原因
viewport也稱視口，PC上是指浏覽器視窗的可視區域。先了解兩個概念：
可見視口（visual viewport）：浏覽器視窗的可視區域
布局視口（layout viewport）：CSS在應用時所設定的布局最大寬度。布局視口可以大于可見視口。
移動裝置上的viewport都是要大于浏覽器可視區域的、這樣就會産生一個預設縮放的結果，請看示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>viewport</title>
</head>
<body>
<p>
viewport也稱視口，PC上是指浏覽器視窗的可視區域。先了解兩個概念： 可見視口（visual viewport）：浏覽器視窗的可視區域 布局視口（layout viewport）：CSS在應用時所設定的布局最大寬度。布局視口可以大于可見視口。
</p>
</body>
</html> 運作效果：
在手機上顯示的效果：
以上是iphone5顯示的效果，字型根本看不清楚原因如下：
CSS中的1px并不等于裝置的1px，PC中CSS的1個像素往往都是對應着電腦螢幕的1個實體像素
CSS中的像素是邏輯上的px
螢幕上的像素是實體上的px，兩者有差別
要考慮PPI，pixels per inch每英寸像素數
當PPI為90時每個像素為0.011英寸
iPhone4的PPI為326，如果CSS像素再和裝置像素保持對應，人眼将很難看清較小的字型或者圖案。
移動裝置上的viewport分為layout viewport、visual viewport和ideal viewport 三類，ideal viewport是最适合移動裝置的viewport，ideal viewport的寬度等于移動裝置的螢幕寬度，也就是寬度為100%的效果。ideal viewport 的意義在于，無論在何種分辨率的螢幕下，那些針對ideal viewport 而設計的網站，不需要使用者手動縮放，也不需要出現橫向滾動條，都可以完美的呈現給使用者。
http://viewportsizes.com/ 各種裝置ideal viewport
就是相同英寸下正常分辨率的PC機的實體像素！一般為72px/英寸，即每英寸寬或高的螢幕有72個實體顔色點。
移動裝置預設的viewport是layout viewport，也就是那個比螢幕要寬的viewport，但在進行移動裝置網站的開發時，我們需要的是ideal viewport。
常用主流移動裝置CSS3 Media Queries整理
@charset "utf-8";
/**
* iPhone 4/4s landscape & portrait
*/
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
}
/**
* iPhone 4/4s portrait
*/
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation:portrait) {
}
/**
* iPhone 4/4s landscape
*/
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation:landscape) {
}
/**
* iPhone 5/5s landscape & portrait
*/
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px) {
}
/**
* iPhone 5/5s portrait
*/
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (orientation: portrait) {
}
/**
* iPhone 5/5s landscape
*/
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (orientation: landscape) {
}
/**
* iPhone 6 landscape & Portrait
*/
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px) {
}
/**
* iPhone 6 Portrait
*/
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation : portrait) {
}
/**
* iPhone 6 landscape
*/
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation : landscape) {
}
/**
* iPhone 6+ Portrait
*/
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation : portrait) {
}
/**
* iPhone 6+ landscape
*/
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation : landscape) {
}
/**
* Galaxy S3 landscape & portrait
*/
@media screen
and (device-width: 320px)
and (device-height: 640px) {
}
/**
* Galaxy S3 portrait
*/
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (orientation: portrait) {
}
/**
* Galaxy S3 landscape
*/
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (orientation: landscape) {
}
/**
* Galaxy S5 landscape & portrait
*/
@media screen
and (device-width: 360px)
and (device-height: 640px) {
}
/**
* Galaxy S5 portrait
*/
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (orientation: portrait) {
}
/**
* Galaxy S5 landscape
*/
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (orientation: landscape) {
}
/**
* iPad landscape & portrait
*/
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/**
* iPad portrait
*/
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/**
* iPad landscape
*/
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
} View Code
4.8.2、設定viewport的方法
利用meta标簽對viewport進行控制，如：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 參數解釋：
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>viewport</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<p>
viewport也稱視口，PC上是指浏覽器視窗的可視區域。先了解兩個概念： 可見視口（visual viewport）：浏覽器視窗的可視區域 布局視口（layout viewport）：CSS在應用時所設定的布局最大寬度。布局視口可以大于可見視口。
</p>
</body>
</html> 效果：
4.8.3、小節
首先如果不設定meta viewport标簽，那麼移動裝置上浏覽器預設的寬度（布局視口）值為800px，980px，1024px等這些，總之是大于螢幕寬度（可見視口）的。這裡的寬度所用的機關px都是指css中的px，它跟代表實際螢幕實體像素的px不是一回事。
每個移動裝置浏覽器中都有一個理想的寬度（ideal viewport），這個理想的寬度是指css中的寬度，跟裝置的實體寬度沒有關系，在css中，這個寬度就相當于100%的所代表的那個寬度。
一般在head中加上如下的meta即可：
<meta name="viewport" content="width=device-width, initial-scale=1" /> 五、REM實作響應式布局
rem是CSS3新引進來的一個度量機關，相對長度機關。相對于根元素(即html元素)font-size計算值的倍數，如：
height:2rem;，則高度的大小為32px（字型預設為16px，chrome最小為12px），如果根元素的字型為15px，則結果為30px。
頁面中的尺寸都以html元素的font-size為相對機關，為預設設定為20px，如果需要一個200px的大小則使用10rem，然後當螢幕大小變化時通過javascript或media queries修改字型大小。
5.1、使用javascript設定相對尺寸
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rem</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
html {
height: 100%;
width: 100%;
font-family: 'Microsoft YaHei';
font-size: 20px;
overflow: hidden;
outline: 0;
}
body {
height: 100%;
margin: 0;
overflow: hidden;
-webkit-user-select: none;
/*取消使用者選擇*/
width: 100%;
}
header,
footer {
width: 100%;
line-height: 1.5rem;
font-size: 1rem;
color: #000;
border: 1px solid #ccc;
text-align: center;
background-color: #ccc;
}
.bd {
margin-top: 1rem;
margin-bottom: .5rem;
margin-right: -.5rem;
font-size: 0;
}
.bd:after {
clear: both;
}
.box {
width: 5rem;
height: 5rem;
display: inline-block;
margin-right: .5rem;
margin-bottom: .5rem;
}
.blue-box {
background-color: #06c;
}
.org-box {
background-color: #1fc195;
}
</style>
</head>
<body>
<header>我是頭部</header>
<div class="bd">
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
</div>
<footer>我是頁腳</footer>
<script>
//定義一個方法并執行
(function(doc, win) {
//獲得文檔的根節點html
var docEl = doc.documentElement;
//如果window中存在orientationchange對象，則取orientationchange,否則取resize
//為了事件綁定
resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
//定義一個方法，重新計算font-size大小
var recalc = function() {
//頁面的寬度
var clientWidth = docEl.clientWidth;
//如果沒有寬度則退出
if(!clientWidth) return;
//重新計算font-size大小，假定320的寬度時字型大小為20;，當頁面變化時重新設定字型大小
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
//如果浏覽器不支援添加事件監聽則結束
if(!doc.addEventListener) return;
//添加事件監聽，指定事件處理函數的時期或階段(boolean)true表示在捕獲事件執行，false表示冒泡時執行
win.addEventListener(resizeEvt, recalc, false);
//當Dom樹加載完成時執行計算，DOMContentLoaded事件要在window.onload之前執行
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</body>
</html> View Code
運作效果：
5.2、使用媒介查詢設定字型尺寸
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rem and media queries</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
html {
height: 100%;
width: 100%;
font-family: 'Microsoft YaHei';
font-size: 20px;
overflow: hidden;
outline: 0;
}
.box {
width: 5rem;
height: 5rem;
display: inline-block;
margin-right: .5rem;
margin-bottom: .5rem;
}
.blue-box {
background-color: #06c;
}
.org-box {
background-color: #1fc195;
}
@media only screen and (max-width: 300px) {
html {
font-size: 10px;
}
}
@media only screen and (min-width: 300px) and (max-width: 640px) {
html {
font-size: 20px;
}
}
@media only screen and (min-width: 640px) and (max-width: 960px) {
html {
font-size: 30px;
}
}
@media only screen and (min-width: 960px){
html {
font-size: 40px;
}
}
</style>
</head>
<body>
<div class="bd">
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
</div>
</body>
</html> 運作結果：
六、示例下載下傳
https://git.coding.net/zhangguo5/CSS301.git
github:https://github.com/zhangguo5/CSS3_4.git
https://git.coding.net/zhangguo5/HTML5_143.git
七、作業
7.1、請參考負邊距布局内容，實作商品展示，當滑鼠懸停在價格與産品名稱上時顯示詳細介紹（請使用float+負邊距、定位、flexbox多種方式實作）
當螢幕寬度不足以容下兩個或以上的産品時，縱向展示。（選作）
素材：https://coding.net/u/zhangguo5/p/CSS301/git/tree/master/img/product
内容也可以參考如下部分：
7.2、請使用Masonry+imageLoaded插件完成圖檔的瀑布流布局
7.3、搭建背景開發環境，MySQL+Java1.8+Idea+Servlet+Spring MVC+Rest
7.4、完成一個瀑布流+延遲加載圖檔的相冊或商品清單，要求圖檔大小不一，示例。顯示時除了圖檔還需要至少一個字元串，如标題，價格等。
a、有背景，通過ajax加載背景的json
b、200條資料以上
c、使用技術參考：masonry+imagesloaded+infinitescroll
d、圖檔放在背景的目錄下
e、背景可以實作管理圖檔、上傳等維護資料的功能（選作）
7.5、請模拟如下的響應式顯示效果，要求相容各種裝置：
7.6、模拟：http://cordova.apache.org/頭部
PC端效果：
移動端效果：
7.7、請完成一個響應式表格。
要求：在電腦上顯示時按網格顯示，在手機端顯示時按單行顯示，風格如下所示：
電腦：
手機：
7.8、使用flexbox實作9個不同位置的定位
左中右x上中下=9
如絕對居中
7.9、請使用flex彈性盒布局實作下面的APP頁面，美團優選
八、視訊