CSS3與頁面布局學習總結（四）——頁面布局的多種方法

本文轉載自查看原文 2016-12-01 20:49 22068

一、負邊距與浮動布局

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>

運行效果：

1.1.2、去除列表右邊框

開發中常需要在頁面中展示一些列表，如商品展示列表等，如果我們要實現如下布局：

實現代碼

<!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 dodgerblue;
            overflow: hidden;
            margin-top: 10px;
        }
        .box {
            width: 180px;
            height: 180px;
            margin: 0 20px 20px 0;
            background: orangered;
            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>

1.1.3、負邊距+定位，實現水平垂直居中

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;
            font-family: 'Heiti SC', 'Microsoft YaHei';
            color: brown;
        }

        #news li{
            height: 26px;
            line-height: 26px;
            border-bottom: 1px dashed   lightblue;
        }
        .lastLi{
            margin-bottom:-1px ;/*意思是向上移回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>

運行效果：

方法二：

使用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;
        }
        #div1 {
            width: 780px;
            margin: 0 auto;
            border: 3px solid dodgerblue;
            overflow: hidden;
            margin-top: 10px;
        }
        .box {
            width: 180px;
            height: 180px;
            margin: 0 20px 30px 0;
            float: left;
            position: relative;
            background: url(img/2.jpg) no-repeat;
            overflow: hidden;
            position: relative;
        }
        #div2{
            margin-right: -20px;
        }

        .footer
        {
            position: absolute;
            bottom: 0;
            height: 40px;
            line-height: 40px;
            transition: height 0.5s;
            font-family: 'Heiti SC', 'Microsoft YaHei';
            font-size: 14px;
            color: white;
        }
        
        .footer:hover{
            transition: height 0.5s;
            height: 60px;
            cursor: pointer;
        }
        
        .span1{
            width: 110px;
            height: 100%;  
            background: #3c3c3c;
            opacity: 0.8;
            float: left;        
        }
        .span2{
            width: 70px;
            height: 100%;  
            float: left;
            background: deeppink;
            text-align: center;
            opacity: 0.8;
        }     
    </style>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div class="box" >
            <div class="footer">
                    <div class="span1">安踏體育運動</div>
                    <div class="span2">$139元</div>
            </div>
        </div>
         
        <div class="box" >
            <div class="footer">   
                    <div class="span1">安踏體育運動</div>
                    <div class="span2">$139元</div>
            </div>
        </div>
        
        <div class="box" >
            <div class="footer">   
                    <div class="span1">安踏體育運動</div>
                    <div class="span2">$139元</div>
            </div>
        </div>
        
        <div class="box" >
            <div class="footer">   
                    <div class="span1">安踏體育運動</div>
                    <div class="span2">$139元</div>
            </div>
        </div>
        
        <div class="box" >
            <div class="footer">   
                    <div class="span1">安踏體育運動</div>
                    <div class="span2">$139元</div>
            </div>
        </div>
        
        <div class="box" >
            <div class="footer">   
                    <div class="span1">安踏體育運動</div>
                    <div class="span2">$139元</div>
            </div>
        </div>
        
        <div class="box" >
            <div class="footer">   
                    <div class="span1">安踏體育運動</div>
                    <div class="span2">$139元</div>
            </div>
        </div>

        <div class="box" >
            <div class="footer">
                <div class="span1">安踏體育運動</div>
                <div class="span2">$139元</div>
            </div>
        </div>

        <div class="box" >
            <div class="footer">
                <div class="span1">安踏體育運動</div>
                <div class="span2">$139元</div>
            </div>
        </div>

        <div class="box" >
            <div class="footer">
                <div class="span1">安踏體育運動</div>
                <div class="span2">$139元</div>
            </div>
        </div>

        <div class="box" >
            <div class="footer">
                <div class="span1">安踏體育運動</div>
                <div class="span2">$139元</div>
            </div>
        </div>

        <div class="box" >
            <div class="footer">
                <div class="span1">安踏體育運動</div>
                <div class="span2">$139元</div>
            </div>
        </div>
        </div>
    </div>
</div>
</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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>雙飛翼頁面布局</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        body,html{
            height: 100%;
            font: 20px/40px"microsoft yahei";
            color: black;
        }
        #container{
            width: 100%;
            margin: 0 auto;
            height: 100%;
        }

        #header,#footer{
            height: 12.5%;
            width: 100%;
            background: deeppink;
        }
        #main{
            height: 75%;
        }
        #center,#left,#right{
            height: 100%;
            float: left;
        }
        #center{
            width: 100%;/*這里center已經占滿了中間這一欄 left right都是在它的上面*/
            background: #1fc195;
        }
        #left{
            background: lightgrey;
            width: 15%;
            margin-left: -100%;/*向左偏移自己的100% 回到上一行的開頭*/
        }
        #right{
            background: #2e6da4;
            width: 15%;
            margin-left: -15%;/*向左偏移自己本身的長度   回到了上一行的末尾*/
        }
        #main-inner{
            padding-left: 15%;/*回到自己的開頭*/
        }
    </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>

運行效果：

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="col25">
        A
    </div>
    <div class="col50">
        B
    </div>

    <div class="col25">
        D
    </div>
</div>
</body>

</html>

運行效果：

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>

運行效果：

二、彈性布局（Flexbox）

假設在項目中有一個這樣的需求：同一行有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;
                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>

運行效果：

三、流式布局（Fluid）

固定布局和流式布局在網頁設計中最常用的兩種布局方式。固定布局能呈現網頁的原始設計效果，流式布局則不受窗口寬度影響，流式布局使用百分比寬度來限定布局元素，這樣可以根據客戶端分辨率的大小來進行合理的顯示。

固定布局效果：

用百分比來做簡單粗暴又實用。

三、瀑布流布局

瀑布流布局是流式布局的一種。是當下比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨着頁面滾動條向下滾動，這種布局還會不斷加載數據塊並附加至當前尾部。最早采用此布局的網站是Pinterest，逐漸在國內流行開來。

3.1、演示

常見瀑布流布局網站：
鼻祖：Pinterest
通用類：豆瓣市集，花瓣網，我喜歡，讀圖知天下
美女圖片：圖麗網
時尚資訊類：看潮網
時尚購物類：蘑菇街，美麗說，人人逛街，卡當網
品牌推廣類：凡客達人
家居o2o類：新巢網小貓家
微博社交類：都愛看
搞笑圖片類：道趣兒
藝術收藏類：微藝術
潮流圖文分享：荷都分享網

3.2、特點

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/masonry-layout@4.1/dist/masonry.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/masonry-layout@4.1/dist/masonry.pkgd.min.js"></script>

3.3.2、初始化插件

使用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>

View Code

運行效果：

3.3.4、使用了圖片的瀑布流

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>瀑布流布局</title>
    <style type="text/css">
        #grid {
            width: 82%;
            margin: 0 auto;
        }

    </style>
</head>

<body>
<div id="grid">
    <div class="grid-item">
        <a href="#">
            <img src="img/1.jpg" width="200" />
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <img src="img/2.jpg" width="200" />
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <img src="img/3.jpg" width="200" />
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <img src="img/1.jpg" width="200" />
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <img src="img/4.jpg" width="200" />
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <img src="img/5.jpg" width="200" />
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <img src="img/6.jpg" width="200" />
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <img src="img/1.jpg" width="200" />
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <img src="img/7.jpg" width="200" />
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <img src="img/4.jpg" width="200" />
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <img src="img/1.jpg" width="200" />
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <img src="img/5.jpg" width="200" />
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <img src="img/4.jpg" width="200" />
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <img src="img/5.jpg" width="200" />
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <img src="img/4.jpg" width="200" />
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <img src="img/1.jpg" width="200" />
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <img src="img/5.jpg" width="200" />
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <img src="img/4.jpg" width="200" />
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <img src="img/5.jpg" width="200" />
        </a>
    </div>
</div>
<script src="js/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: 220,
        });
   }
</script>
</body>

</html>

運行效果：

注意：上面的示例中我們使用了window.onload事件，原因是如果圖片沒有加載完成就執行瀑布流布局會引起堆疊的問題，其實就是初始化是沒有檢測到圖片的高度，window.onload在有許多圖片的環境下會有性能問題，這里給大家介紹另一個組件。

3.3.5、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>

運行效果如同上

屬性與事件官網有詳細的說明這里只列出來了部分，下面是官網列出的選擇：

$('.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數據：

[1,2,3,4,5,6]

m3.json數據：

[7,8,9,4,5,6]

運行結果：

四、響應式布局（Responsive）

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、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>

運行效果：

寬屏時：

小屏時：

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）

.8、視區（viewport）

4.8.1、需要設置viewport的原因

viewport也稱視口，PC上是指瀏覽器窗口的可視區域。先了解兩個概念：

可見視口（visual viewport）：瀏覽器窗口的可視區域

布局視口（layout viewport）：CSS在應用時所設置的布局最大寬度。布局視口可以大於可見視口。

<!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>

在手機上的運行效果：

首先如果不設置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" />

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。