CSS3与页面布局学习总括(四)——页面布局大全

一 、负边距与变化布局

1.1、负边距

所谓的负边距正是margin取负值的景观,如margin:-100px,margin:-百分百。当八个因素与另3个因素margin取负值时将拉中距离。常见的作用如下:

1.1.壹 、向上移动

当三个成分同时从行业内部流中脱离开来时,要是前3个因素的肥瘦为百分百大幅度,后边的要素通过负边距能够完结发展。当负的边距超过本身的增长幅度将向上,只要没有当先本身宽度就不会进步,示例如下:

<!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%时运行作效果果:

Bootstrap 1

margin-left:-三成时运维作效果果:

Bootstrap 2

margin-left:-百分之百时运转效果:

Bootstrap 3

1.1.② 、去除列表左边框

开发中常必要在页面中彰显一些列表,如商品显示列表等,要是我们要兑现如下布局:

 Bootstrap 4

示范代码:

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

运营后的结果:

Bootstrap 5

唯独地点的作用中左侧多出了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>

格局是利用了边距折叠,能够在日前的稿子中查看到细节,基本原理如下图所示:

Bootstrap 6

方法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>

效果:

Bootstrap 7

1.1.③ 、负边距+定位,实现程度垂直居中

实际请参考《CSS3与页面布局学习总计(三)——BFC、定位、浮动、7种垂直居中方法》

1.1.④ 、去除列表最终三个li成分的border-bottom

Bootstrap 8

方法一:

Bootstrap 9Bootstrap 10

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

Bootstrap 11

方法二:

利用CSS3中的新扩充选取器,选拔最终多个li,不使用类样式,好处是当li的个数不分明时尤其惠及。

要是li的border-bottom颜色与ul的border颜色是同一的时候,在视觉上是被埋伏了。假若其颜色不相同的时候照旧有标题,给ul写个overflow:hidden;就能够缓解那几个难题。

1.② 、双飞翼布局

Bootstrap,经典三列布局,也称之为圣杯布局【Holy Grail of Layouts】是凯文Cornell在2005年提议的3个布局模型概念,在境内最早是由TmallUED的工程师传播开来,在中华也有叫法是双飞翼布局,它的布局要求有几点:

① 、三列布局,中间宽度自适应,两边定宽;
贰 、中间栏要在浏览器中先行展示渲染;
③ 、允许任意列的高度最高;
四 、须求只用二个附加的DIV标签;
伍 、须要用最简便的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>

 

运行效果:

Bootstrap 12

示范中扩充四个main-inner的指标是因为当left上移时与center重叠了,left覆盖了center,通过main-inner的padding将left占用的岗位空出。

1.叁 、多栏布局

1.3.一 、栅格系统

栏栅格系统就是运用生成完结的多栏布局,在bootstrap中用的老大多,那里以2个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>

 

运作结果:

Bootstrap 13

Bootstrap 14

Bootstrap 15

一如既往的法则能够随便扩展到8列,10列,16列的栅格系统。

1.3.② 、多列布局

栅格系统并不曾真正贯彻分栏效果(如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 ‘>: 设置或探寻对象的列数

示范代码:

Bootstrap 16Bootstrap 17

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

运作结果:

Bootstrap 18

② 、弹性布局(Flexbox)

倘若在品种中有三个这么的须要:同一行有三个菜单,每一种菜单占三分一的上涨幅度,怎么落实?

莫不你会那样完毕:

Bootstrap 19Bootstrap 20

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

结果:

Bootstrap 21

上边包车型大巴主意有显明的紧缺便是可扩展性太差,因为只要再添加一项就会有贰个食谱项会换行,化解办法是: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>

运行结果:

Bootstrap 22

Bootstrap 23

display属性值flex: 将对象作为弹性伸缩盒突显

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>

.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;}

本例定义了父容器宽(即主轴宽)为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>

运作结果:

Bootstrap 24

Flex容器能够设置属性flex-flow,取值为row,row-reverse,column,column-reverse七种值
row:展现在一行中

row-reverse:展现在一行中,反转

column:展现在一列中

column-reverse:显示在一列中 反转

Bootstrap 25Bootstrap 26

<!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%;
                padding-top :20px;
            }
            #menu {
                width: 980px;
                margin: 0 auto;
                display: flex;
                /*当前块为弹性盒*/
                flex-flow: row-reverse;
                /*子项在一行中显示,反转*/
            }
            #menu li {
                flex: auto;
            }
            #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 class="a">
                <a href="#" class="item">A公司简介</a>
            </li>
            <li class="b">
                <a href="#" class="item">B商品展示</a>
            </li>
            <li class="c">
                <a href="#" class="item">C后台管理</a>
            </li>
        </ul>
    </body>
</html>

View Code

Bootstrap 27

Bootstrap 28Bootstrap 29

<!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%;
                padding-top :20px;
            }
            #menu {
                margin: 0 auto;
                display: flex;
                /*当前块为弹性盒*/
                flex-flow: column-reverse;
                height: 200px;
                overflow: hidden;
            }
            #menu li{
                border: 1px solid cornflowerblue;
                margin-bottom: 5px;
                text-align: center;
            }
            #menu li a {
                text-decoration: none;
                vertical-align: middle;
            }
            .a{
                flex: 1;
            }
            .b{
                flex: 2;
            }
            .c{
                flex: 3;
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li class="a">
                <a href="#" class="item">A公司简介</a>
            </li>
            <li class="b">
                <a href="#" class="item">B商品展示</a>
            </li>
            <li class="c">
                <a href="#" class="item">C后台管理</a>
            </li>
        </ul>
    </body>
</html>

View Code

Bootstrap 30

三 、流式布局(Fluid)

固化布局和流式布局在网页设计中最常用的三种布局格局。固定布局能显现网页的原来设计功效,流式布局则不受窗口宽度影响,流式布局使用百分比上涨幅度来界定布局元素,那样能够根据客户端分辨率的大小来展开客观的显得。

原则性布局成效:

Bootstrap 31

流式布局作用:

Bootstrap 32

运用前边的知识点能够完结那二种布局,那里就不去落到实处了

叁 、瀑布流布局

瀑布流布局是流式布局的一种。是随即比较流行的一种网站页面布局,视觉突显为犬牙交错的多栏布局,随着页面滚动条向下滚动,那种布局还会没完没了加载数据块并附加至方今底部。最早接纳此布局的网站是Pinterest,逐步在境内风靡开来。

3.壹 、常见瀑布流布局网站

鼻祖:Pinterest
通用类:豆瓣市镇,花瓣网,小编喜欢,读图知天下
红颜图片:图丽网
时髦动资金讯类:看潮网
风尚购物类:蘑菇街,美貌说,人人逛街,卡当网
品牌推广类:凡客达人
家居o2o类:新巢网小猫家
乐乎社交类: 都爱看
搞笑图片类:道趣儿
措施收藏类:微艺术
风尚图像和文字分享:荷都分享网

Bootstrap 33

3.2、特点

优点

壹 、有效的骤降了界面复杂度,节省了空间:大家不再需求臃肿复杂的页码导航链接或按钮了。

贰 、对触屏设备来说,交互方式更切合直觉:在移动使用的互动环境在这之中,通过提升滑动进行滚屏的操作已经济体改为最基本的用户习惯,而且所要求的操作精准程度远远小于点击链接或按钮。

叁 、更高的参加度:以上两点所推动的竞相便捷性能够使用户将注意力越多的汇集在剧情而不是操作上,从而让他俩更愿意沉浸在追究与浏览个中。

缺点

  1. 个其他用例:
    不过滚动的不二法门只适用于有个别特定类型产品中间有个别一定项指标内容。
    比如,在电商网站个中,用户时时供给在货物列表与详情页面之间切换,那种状态下,古板的、带有页码导航的措施能够援助用户更安妥和精确的回到有个别特定的列表页面当中。

  2. 额外的复杂度:
    那多少个用来创立无限滚动的JS库尽管都自称很简单选拔,但你总会要求在融洽的制品中实行差别水平的定制化处理,以满足你们自个儿的必要;其它这个JS库在浏览器和设备包容性等地方的显现也长短不一,你必须办好丰硕的测试与调整工作。

  3. 再见了,页脚:
    若是选取了相比杰出的至极滚动加载方式,那就象征你能够和页脚说拜拜了。
    最棒考虑一下页脚对于你的网站,越发是用户的重点;假若内部的确有相比关键的剧情或链接,那么最佳换一种更古板和妥贴的点子。
    绝对不要耍弄你的用户,当她们3遍次的浏览到页面底部,看到页脚,却因为电动加载的内容突然冒出而不顾都无法儿点击页脚中的链接时,他们会变的越来越愤怒。

  4. SEO:

汇总在一页个中动态加载数据,与一页一页的出口相比较,究竟那种办法更方便SEO,那是您不能够不考虑的难题。对于一些以系列网站的话,在那方面开始展览冒险是很不划算的。

  1. 有关页面数量的印象:
    其实站在用户的角度来看,那或多或少并非负面;不过,若是对于你的网站来说,通过越来越多的剧情页面展现越来越多的有关消息(包涵广告)是很重点的政策,那么单页无限滚动的不二法门对您并不适用。

3.③ 、masonry实现瀑布流布局

masonry是1个响应式网格布局库(非jQuery)。(Cascading grid layout
library)

假如使用CSS+JavaScript当然能够兑现瀑布流布局,但针锋相对费力,masonry是1个javascript插件,通过该插件能够轻松达成瀑布流布局,和CSS中float的功用不太一致的地点在
于,float先水平排列,然后再垂直排列,使用Masonry则垂直排列成分,然后将下一个因素放置到网格中的下二个支付区域。那种效益能够最小化处理
分裂高度的成分在笔直方向的间隙。

官网:http://masonry.desandro.com/

源码:https://github.com/desandro/masonry

Bootstrap 34

3.3.壹 、下载并引用masonry

能够去官网或github下载“masonry.pkgd.min.js”,将下载到的插件添加到项目中,并在页面中足够引用,如下所示:

<script src="js/masonry/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>

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.② 、准备内容

在页面中行使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>

没有使用瀑布流布局时的效果:

Bootstrap 35

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>

运维结果:

Bootstrap 36

3.3.④ 、使用了图片的瀑布流

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

运作结果:

Bootstrap 37

注意:下边包车型客车示范中我们选拔了window.onload事件,原因是就算图片并未加载成功就执行瀑布流布局会挑起堆叠的题材,其实正是初叶化是从未检查和测试到图片的惊人,window.onload在有成都百货上千图纸的环境下会有总体性难题,那里给大家介绍另一个组件。

3.3.伍 、图片基础

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

 

结果:

Bootstrap 38

 

3.④ 、imagesLoaded 图片加载

imagesLoaded 是2个用于来检查和测试网页中的图片是还是不是载入完结的 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>

运维结果:

Bootstrap 39

示例2:

Bootstrap 40Bootstrap 41

<!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="Bootstrap 42" /></p>
            <p>管理信息系统登录界面:</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319210724979-1119915147.jpg" alt="Bootstrap 43" /></p>
            <p>管理信息系统后台界面:</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319210738432-854332365.jpg" alt="Bootstrap 44" /></p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201704/63651-20170403153745066-468375996.png" alt="Bootstrap 45" /></p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201704/63651-20170403153851988-693921773.png" alt="Bootstrap 46" /></p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201704/63651-20170403153959957-1916226567.png" alt="Bootstrap 47" /></p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170320102945752-510492367.png" alt="Bootstrap 48" /></p>
            <p>后台UI源文件效果预览1.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211458479-1573731955.jpg" alt="Bootstrap 49" /></p>
            <p>后台UI源文件效果预览2.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211514635-1085976697.jpg" alt="Bootstrap 50" /></p>
            <p>后台UI源文件效果预览3.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211522495-367520285.jpg" alt="Bootstrap 51" /></p>
            <p>后台UI源文件效果预览4.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211533416-313715133.jpg" alt="Bootstrap 52" /></p>
            <p>后台UI源文件效果预览5.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211601260-1282800119.jpg" alt="Bootstrap 53" /></p>
            <p>后台UI源文件效果预览6.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211651541-257820397.jpg" alt="Bootstrap 54" /></p>
            <p>后台UI源文件效果预览7.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211733963-600455455.jpg" alt="Bootstrap 55" /></p>
            <p>后台UI源文件效果预览8.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211741229-375627068.jpg" alt="Bootstrap 56" /></p>
            <p>后台UI源文件效果预览9.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211747495-1038741445.jpg" alt="Bootstrap 57" /></p>
            <p>后台UI源文件效果预览10.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211821541-1870563995.jpg" alt="Bootstrap 58" /></p>
            <p>后台UI源文件效果预览11.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211847526-88858662.jpg" alt="Bootstrap 59" /></p>
            <p>后台UI源文件效果预览12.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211918901-1487416243.jpg" alt="Bootstrap 60" /></p>
            <p>后台UI源文件效果预览13.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211935198-1455577157.jpg" alt="Bootstrap 61" /></p>
            <p>后台UI源文件效果预览14.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211939698-2023943995.jpg" alt="Bootstrap 62" /></p>
            <p>后台UI源文件效果预览15.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319211955979-1280535056.jpg" alt="Bootstrap 63" /></p>
            <p>后台UI源文件效果预览16.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212002260-769742404.jpg" alt="Bootstrap 64" /></p>
            <p>后台UI源文件效果预览17.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212019526-1867955856.jpg" alt="Bootstrap 65" /></p>
            <p>后台UI源文件效果预览18.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212027198-1710146675.jpg" alt="Bootstrap 66" /></p>
            <p>后台UI源文件效果预览19.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212033088-1858074339.jpg" alt="Bootstrap 67" /></p>
            <p>后台UI源文件效果预览20.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212038948-1018032788.jpg" alt="Bootstrap 68" /></p>
            <p>后台UI源文件效果预览21.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212044448-485785412.jpg" alt="Bootstrap 69" /></p>
            <p>后台UI源文件效果预览22.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212050620-2069625287.jpg" alt="Bootstrap 70" /></p>
            <p>后台UI源文件效果预览23.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212055323-72502592.jpg" alt="Bootstrap 71" /></p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>后台UI源文件效果预览24.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212101307-1670477572.jpg" alt="Bootstrap 72" /></p>
            <p>后台UI源文件效果预览25.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212107041-1752314202.jpg" alt="Bootstrap 73" /></p>
            <p>后台UI源文件效果预览26.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212113573-843908032.jpg" alt="Bootstrap 74" /></p>
            <p>后台UI源文件效果预览27.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212119479-1961410540.jpg" alt="Bootstrap 75" /></p>
            <p>后台UI源文件效果预览28.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212124588-2050526211.jpg" alt="Bootstrap 76" /></p>
            <p>后台UI源文件效果预览29.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212133963-345654335.jpg" alt="Bootstrap 77" /></p>
            <p>后台UI源文件效果预览30.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212139651-2085714868.jpg" alt="Bootstrap 78" /></p>
            <p>后台UI源文件效果预览31.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212209963-1505909711.jpg" alt="Bootstrap 79" /></p>
            <p>后台UI源文件效果预览32.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212217323-1285298741.jpg" alt="Bootstrap 80" /></p>
            <p>后台UI源文件效果预览33.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212224932-1909112377.jpg" alt="Bootstrap 81" /></p>
            <p>后台UI源文件效果预览34.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212234276-1478200637.jpg" alt="Bootstrap 82" /></p>
            <p>后台UI源文件效果预览35.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212535416-746129132.jpg" alt="Bootstrap 83" /></p>
            <p>后台UI源文件效果预览36.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212541354-451500014.jpg" alt="Bootstrap 84" /></p>
            <p>后台UI源文件效果预览37.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212613760-844809474.jpg" alt="Bootstrap 85" /></p>
            <p>后台UI源文件效果预览38.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212620557-776804426.jpg" alt="Bootstrap 86" /></p>
            <p>后台UI源文件效果预览39.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212628276-1531913723.jpg" alt="Bootstrap 87" /></p>
            <p>后台UI源文件效果预览40.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212636713-1576030888.jpg" alt="Bootstrap 88" /></p>
            <p>后台UI源文件效果预览41.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212645213-1328314494.jpg" alt="Bootstrap 89" /></p>
            <p>后台UI源文件效果预览42.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212653916-1728096300.jpg" alt="Bootstrap 90" /></p>
            <p>后台UI源文件效果预览43.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212702307-1916172043.jpg" alt="Bootstrap 91" /></p>
            <p>后台UI源文件效果预览44.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212711729-767609725.jpg" alt="Bootstrap 92" /></p>
            <p>后台UI源文件效果预览45.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212720245-1474820956.jpg" alt="Bootstrap 93" /></p>
            <p>后台UI源文件效果预览46.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212728979-1033613408.jpg" alt="Bootstrap 94" /></p>
            <p>后台UI源文件效果预览47.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212736995-992230524.jpg" alt="Bootstrap 95" /></p>
            <p>后台UI源文件效果预览48.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212749260-266950659.jpg" alt="Bootstrap 96" /></p>
            <p>后台UI源文件效果预览49.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212757245-1650723680.jpg" alt="Bootstrap 97" /></p>
            <p>后台UI源文件效果预览50.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212822463-1289739165.jpg" alt="Bootstrap 98" /></p>
            <p>后台UI源文件效果预览51.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212830416-720826789.jpg" alt="Bootstrap 99" /></p>
            <p>后台UI源文件效果预览52.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212840620-623419195.jpg" alt="Bootstrap 100" /></p>
            <p>后台UI源文件效果预览53.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212851073-2070968428.jpg" alt="Bootstrap 101" /></p>
            <p>后台UI源文件效果预览54.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212858885-721901521.jpg" alt="Bootstrap 102" /></p>
            <p>后台UI源文件效果预览55.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212907182-117093308.jpg" alt="Bootstrap 103" /></p>
            <p>后台UI源文件效果预览56.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212914635-418040247.jpg" alt="Bootstrap 104" /></p>
            <p>后台UI源文件效果预览57.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212922385-1216341652.jpg" alt="Bootstrap 105" /></p>
            <p>后台UI源文件效果预览58.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212930291-527202617.jpg" alt="Bootstrap 106" /></p>
            <p>后台UI源文件效果预览59.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212937479-238445367.jpg" alt="Bootstrap 107" /></p>
            <p>&nbsp;</p>
            <p>后台UI源文件效果预览60.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212949495-1168504867.jpg" alt="Bootstrap 108" /></p>
            <p>后台UI源文件效果预览61.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319212957495-587805195.jpg" alt="Bootstrap 109" /></p>
            <p>后台UI源文件效果预览62.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213006166-887235383.jpg" alt="Bootstrap 110" /></p>
            <p>后台UI源文件效果预览63.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213013995-1880131966.jpg" alt="Bootstrap 111" /></p>
            <p>后台UI源文件效果预览64.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213022463-479679065.jpg" alt="Bootstrap 112" /></p>
            <p>后台UI源文件效果预览65.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213031854-307158776.jpg" alt="Bootstrap 113" /></p>
            <p>后台UI源文件效果预览66.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213038838-982540405.jpg" alt="Bootstrap 114" /></p>
            <p>后台UI源文件效果预览67.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213049307-210755769.jpg" alt="Bootstrap 115" /></p>
            <p>后台UI源文件效果预览68.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213056651-88654019.jpg" alt="Bootstrap 116" /></p>
            <p>后台UI源文件效果预览69.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213103651-1340111007.jpg" alt="Bootstrap 117" /></p>
            <p>后台UI源文件效果预览70.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213111979-1990254477.jpg" alt="Bootstrap 118" /></p>
            <p>后台UI源文件效果预览71.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213123120-42377418.jpg" alt="Bootstrap 119" /></p>
            <p>后台UI源文件效果预览72.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213130307-473956631.jpg" alt="Bootstrap 120" /></p>
            <p>后台UI源文件效果预览73.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213141307-8268135.jpg" alt="Bootstrap 121" /></p>
            <p>后台UI源文件效果预览74.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213153510-644201557.jpg" alt="Bootstrap 122" /></p>
            <p>后台UI源文件效果预览75.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213201666-1574964734.jpg" alt="Bootstrap 123" /></p>
            <p>后台UI源文件效果预览76.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213212198-725946488.jpg" alt="Bootstrap 124" /></p>
            <p>后台UI源文件效果预览77.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213219276-568665808.jpg" alt="Bootstrap 125" /></p>
            <p>后台UI源文件效果预览78.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213227166-1096207415.jpg" alt="Bootstrap 126" /></p>
            <p>后台UI源文件效果预览78.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213234291-512151309.jpg" alt="Bootstrap 127" /></p>
            <p>后台UI源文件效果预览80.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213241213-1353552770.jpg" alt="Bootstrap 128" /></p>
            <p>后台UI源文件效果预览81.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213248166-1202711403.jpg" alt="Bootstrap 129" /></p>
            <p>后台UI源文件效果预览82.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213258245-1102416390.jpg" alt="Bootstrap 130" /></p>
            <p>后台UI源文件效果预览83.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213305838-865548337.jpg" alt="Bootstrap 131" /></p>
            <p>后台UI源文件效果预览84.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213312166-424235563.jpg" alt="Bootstrap 132" /></p>
            <p>后台UI源文件效果预览85.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213320182-310152719.jpg" alt="Bootstrap 133" /></p>
            <p>后台UI源文件效果预览86.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213330495-1303439323.jpg" alt="Bootstrap 134" /></p>
            <p>后台UI源文件效果预览87.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213338557-1213240156.jpg" alt="Bootstrap 135" /></p>
            <p>后台UI源文件效果预览88.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213346510-1570198481.jpg" alt="Bootstrap 136" /></p>
            <p>后台UI源文件效果预览89.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213356448-1692105900.jpg" alt="Bootstrap 137" /></p>
            <p>后台UI源文件效果预览90.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213404604-910791420.jpg" alt="Bootstrap 138" /></p>
            <p>后台UI源文件效果预览91.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213411526-539349830.jpg" alt="Bootstrap 139" /></p>
            <p>后台UI源文件效果预览92.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213429401-718695402.jpg" alt="Bootstrap 140" /></p>
            <p>后台UI源文件效果预览93.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213448979-907316264.jpg" alt="Bootstrap 141" /></p>
            <p>后台UI源文件效果预览94.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213500870-448776637.jpg" alt="Bootstrap 142" /></p>
            <p>后台UI源文件效果预览95.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213508682-657176788.jpg" alt="Bootstrap 143" /></p>
            <p>后台UI源文件效果预览96.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213518026-1052811140.jpg" alt="Bootstrap 144" /></p>
            <p>后台UI源文件效果预览97.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213525932-1326458502.jpg" alt="Bootstrap 145" /></p>
            <p>后台UI源文件效果预览98.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213533370-1038572861.jpg" alt="Bootstrap 146" /></p>
            <p>后台UI源文件效果预览99.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213540807-1750200096.jpg" alt="Bootstrap 147" /></p>
            <p>后台UI源文件效果预览100.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213548229-1349456854.jpg" alt="Bootstrap 148" /></p>
            <p>后台UI源文件效果预览101.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213555620-1293747046.jpg" alt="Bootstrap 149" /></p>
            <p>后台UI源文件效果预览102.jpg</p>
            <p><img src="http://images2015.cnblogs.com/blog/63651/201703/63651-20170319213602541-1840125225.jpg" alt="Bootstrap 150" /></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

效果:

Bootstrap 151

3.五 、Infinite Scroll 滚动分页

Infinite
Scroll也是依照jQuery插件,是1个用于滚动分页的插件(当移动滚动条时将动态加载越多内容),有网民称那种效果为”无刷新无分页完美瀑布流”呈现方式。

官网:http://infinite-scroll.com/

源码:https://github.com/infinite-scroll/infinite-scroll

Bootstrap 152

常用属性:

$('#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.一 、异步加载普通页面

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>

运作效果:

Bootstrap 153

3.5.贰 、异步加载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]

运作结果:

Bootstrap 154

因为尚未动用瀑布流布局所以有点不收拾,那里最首要演示分页。

④ 、响应式布局(Responsive)

4.① 、媒介类型

@media早在css2.第11中学就有了,用于判断媒介类型,如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>

不使用媒介时运维效果:

Bootstrap 155

 使用媒介时运转效果:

Bootstrap 156

4.贰 、媒介查询的选拔位置(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>

全屏时的运转效果:

Bootstrap 157

压缩浏览器的效应:

Bootstrap 158

4.四 、媒介查询语法

@media
queries是CSS3中引入的,不仅可以兑现媒介类型的询问能够兑现设备本性的查询,能够简单认为是对CSS2.第11中学的media的增高,基本语法如下:

@media [not|only] media_type and feature

not:取反操作

only:让不补助media query的装置但读取media type类型的浏览器忽略那几个样式

media_type:是媒介类型,具体如下:

Bootstrap 159

feature:定义设备性子,多数允许加前缀min-,max-,八个规范得以采用and连接,and两侧要求空格。

Bootstrap 160

广大写法:

            @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.伍 、响应式栅格系统(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时: 

Bootstrap 161

480-960里边的功用:

Bootstrap 162

 在小叔子大上模仿的作用:

Bootstrap 163

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格式文书档案头2个字节正是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.⑦ 、移动优先(Mobile First)

a)、桌面优先(优雅降级)

那是一种价值观的做法,开发项目时优先PC端,然后再经过一些hack的不二法门让项目符合规律运行在移动端,所谓的降级能够省略认为便是将一些信息隐藏,因为移动端的可视范围有限,必须给用户提供简单为主的内容。

b)、移动优先(渐进增强)

Bootstrap 164

a)、对于产品设计师,2个新产品先规划移动版,然后才是桌面版。

b)、对于工程师,三个新产品,先开发移动版,然后才是桌面版本。

诸如此类的益处是能把握好最基本最重庆大学内容,让界面简单。

练习

4.8、视区(viewport)

4.8.一 、供给安装viewport的由来

viewport也称视口,PC上是指浏览器窗口的可视区域。先精晓三个概念:

看得出视口(visual viewport):浏览器窗口的可视区域

布局视口(layout
viewport):CSS在使用时所设置的布局最小幅面。布局视口可以超越可知视口。

Bootstrap 165

一抬手一动脚设备上的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>

运作效果:

Bootstrap 166

在手提式有线电话机上海展览中心示的效应:

Bootstrap 167

如上是iphone5显示的意义,字体根本看不清楚原因如下:

CSS中的1px并不等于设备的1px,PC中CSS的一个像素往往都是对应着电脑显示器的2个大体像素
CSS中的像素是逻辑上的px
显示屏上的像素是大体上的px,两者有分别
要考虑PPI,pixels per inch每英寸像素数
当PPI为90时每一种像素为0.011英寸
Nokia4的PPI为326,假使CSS像素再和配备像素保持对应,人眼将极丑清较小的字体或许图案。

挪动装备上的viewport分为layout viewport、visual viewport和ideal viewport
三类,ideal viewport是最适合运动设备的viewport,ideal
viewport的宽窄等于移动装备的荧屏宽度,也正是开间为百分百的功效。ideal
viewport 的意思在于,无论在何种分辨率的显示器下,那多少个针对ideal viewport
而设计的网站,不须要用户手动缩放,也不需求出现横向滚动条,都得以健全的显现给用户。
http://viewportsizes.com/ 各类装备ideal viewport
固然同一英寸下健康分辨率的PC机的大体像素!一般为72px/英寸,即每英寸宽或高的显示屏有柒12个大体颜色点。

一抬手一动脚设备暗中认可的viewport是layout
viewport,相当于可怜比显示器要宽的viewport,但在进行移动设备网站的支付时,我们要求的是ideal
viewport。

Bootstrap 168

4.8.2、设置viewport的方法

选拔meta标签对viewport进行支配,如:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

参数解释:

Bootstrap 169

示例:

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

效果:

Bootstrap 170

4.8.3、小节

第二借使不安装meta
viewport标签,那么移动装备上浏览器暗中认可的幅度(布局视口)值为800px,980px,1024px等那一个,由此可见是超乎荧屏宽度(可知视口)的。那里的大幅所用的单位px都以指css中的px,它跟代表实际荧屏物理像素的px不是3次事。

每一种移动设备浏览器中都有三个不错的幅度(ideal
viewport),这几个妙不可言的肥瘦是指css中的宽度,跟设备的情理宽度没有提到,在css中,那几个幅度就一定于百分百的所代表的特别宽度。

相似在head中充足如下的meta即可:

<meta name="viewport" content="width=device-width, initial-scale=1" />

⑤ 、REM完成响应式布局

rem是CSS3新引进来的1个心地单位,相对长度单位。相对于根成分(即html成分)font-size总括值的倍数,如:

height:2rem;,则中度的高低为32px(字体暗中认可为16px,chrome最小为12px),假使根成分的字体为15px,则结果为30px。

页面中的尺寸都是html成分的font-size为相对单位,为暗中认可设置为20px,假若急需二个200px的轻重则利用10rem,然后当显示器尺寸变化时通过javascript或media
queries修改字体大小。

Bootstrap 171

5.壹 、使用javascript设置相对尺寸

演示代码:

Bootstrap 172Bootstrap 173

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

 

运转效果:

Bootstrap 174

5.贰 、使用媒介查询设置字体尺寸

以身作则代码:

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

 

运营结果:

 Bootstrap 175

Bootstrap 176

六 、示例下载

https://git.coding.net/zhangguo5/CSS301.git

github:https://github.com/zhangguo5/CSS3\_4.git

七、作业

7.一 、请参见负边距布局内容,达成商品体现,当鼠标悬停在标价与产品名称上时展现详细介绍

当显示屏宽度不足以容下三个或上述的出品时,纵向显示。(选作)

素材:https://coding.net/u/zhangguo5/p/CSS301/git/tree/master/img/product

Bootstrap 177

 内容也能够参见如下一些:

Bootstrap 178

7.二 、请使用Masonry+imageLoaded插件实现图片的瀑布流布局

Bootstrap 179

7.三 、搭建后台开发环境,MySQL+Java1.8+Idea+Servlet+Spring MVC+Rest

7.四 、完结3个瀑布流+延迟加载图片的相册或货物列表,须求图片大小不一,示例。展现时除了图片还索要至少贰个字符串,如题目,价格等。

a、有后台,通过ajax加载后台的json

b、200条数据以上

c、使用技巧参考:masonry+imagesloaded+infinitescroll

d、图片放在后台的目录下

e、后台能够实现管理图片、上传等保障数据的机能(选作)

Bootstrap 180

7.五 、请模拟如下的响应式突显效果,要求同盟各样装备:

Bootstrap 181

7.6、模拟:http://cordova.apache.org/头部

PC端效果:

Bootstrap 182

挪动端效果:

Bootstrap 183

Bootstrap 184

八、视频

 https://www.bilibili.com/video/av16530230/

相关文章