LESS达成瀑布流,商品呈现特效
分类:澳门新萄京最大平台

聊聊 CSS3 中的 object-fit 和 object-position

2016/11/22 · CSS · CSS3

本文我: 伯乐在线 - TGCode 。未经小编许可,禁绝转发!
接待参预伯乐在线 专辑编辑者。

近几来直接劳碌将JavaScript学习的笔记收拾成都电子通信工程高校子书,也没怎么空闲时间写新的文章。趁着前几日有一些空闲,决定再来折腾一下CSS3中的三个性格:object-fitobject-position

那多少个奇葩的性质是做什么的呢?其实它们是为着管理替换元素(replaced elements卡塔 尔(阿拉伯语:قطر‎的自适应难点,不问可以知道,便是拍卖替换到分的变形(这里指长度宽度比例变形卡塔尔国难点。

等等,好像多了二个名词,啥叫替换元素?替换来分其实是:

  • 其剧情不受CSS视觉格式化模型调控的成分,举例image,嵌入的文书档案(iframe之类)或许applet,叫做替换来分。比:img成分的剧情日常会被其src属性钦点的图像替换掉。替换到分平常常有其原有的尺寸:叁个原来的升幅,几个原来的可观和二个原有的比值。举个例子生机勃勃幅位图有固有用相对单位钦点的小幅和中度,从而也许有固有的宽高比率。另一面,别的文书档案也说不许没有原本的尺码,比如二个空荡荡的html文书档案。
  • CSS渲染模型不考虑替换到分内容的渲染。这一个替换来分的表现独立于CSS。object,video,textarea,input也是替换来分,audio和canvas在某个特定情景下为替换来分。使用CSS的content属性插入的对象是佚名替换到分。

那个当然不是自家头脑沙暴来的,而是援用别人的解说:引用

大范围的改换成分有<video>、<object>、<img>、<input type=”image”>、<svg>、<svg:image>和<svg:video>等。

假使看的稀里纷纷洋洋的也没涉及,接着往下看,小编深信您会知道!

1、object-fit

语法:

object-fit: fill | contian | cover | none | scale-down;

1
object-fit: fill | contian | cover | none | scale-down;
  • fill : 暗许值。填充,可替换来分填满全部内容区域,大概会转移长度宽度比,引致拉伸。
  • contain : 包罗,保持原本的尺码比例,保障可替换来分完整显示,宽度或可观至稀有八个和剧情区域的小幅度或高度风度翩翩致,部分内容会空白。
  • cover : 覆盖,保持原本的尺寸比例,保障内容区域被填满。由此,可替换元素也许会被切去黄金时代部分,进而不能够完好呈现。
  • none : 保持可替换来分原尺寸和比重。
  • scale-down : 等比裁减。就恍如依次安装了none或contain, 末了展现的是尺寸超小的百般。

倒霉意思,作者又要摆妹子来吸引你们了,看效能图:

澳门新萄京 1

地点的多个例证的代码:

<style> .box{ position:relative; float:left; margin:0 10px 40px 10px; width:150px; height:150px; } .box>img{ width:100%; height:100%; background-color:#000; } .fill{ object-fit:fill; } .contain{ object-fit:contain; } .cover{ object-fit:cover; } .none{ object-fit:none; } .scale{ object-fit:scale-down; } </style> <div class="box"> <img src="example-girl.jpg" class="fill" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="contain" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="cover" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="none" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="scale" alt=""> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<style>
.box{  
  position:relative;  
  float:left;  
  margin:0 10px 40px 10px;  
  width:150px;  
  height:150px;  
}  
.box>img{  
  width:100%;  
  height:100%;  
  background-color:#000;  
}  
.fill{  
  object-fit:fill;  
}  
.contain{  
  object-fit:contain;  
}  
.cover{    
  object-fit:cover;  
}  
.none{  
  object-fit:none;  
}  
.scale{  
  object-fit:scale-down;  
}  
</style>
 
<div class="box">  
  <img src="example-girl.jpg" class="fill" alt="">  
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="contain" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="cover" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="none" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="scale" alt="">
</div>

总的来看这个效应,小编想同志们最关切的的相应是宽容性,点这里点这里

2、object-position

object-position属性决定了它的盒子里面替换来分的对齐形式。

语法:

object-position: <position>

1
object-position: <position>

暗中同意值是50% 50%,约等于居中功能,其取值和CSS中background-position质量取值同样。(假设不熟谙background-position,能够瞄瞄这里《CSS3 Background》)

比方:替换成分位于内容区域的左上角

img{ object-fit: contain; object-position: 0 0; }

1
2
3
4
img{
  object-fit: contain;
  object-position: 0 0;
}

效果图:

澳门新萄京 2

比如:替换成分相对于左下角10px 10px地点一定

img{   object-fit: contain;   object-position: bottom 10px left 10px; }

1
2
3
4
img{
  object-fit: contain;
  object-position: bottom 10px left 10px;
}

效果图:

澳门新萄京 3

本来,你也能够采纳calc()来牢固:

img{   object-fit: contain;   object-position: calc(100% - 10px) calc(100% - 10px); }

1
2
3
4
img{
  object-fit: contain;
  object-position: calc(100% - 10px) calc(100% - 10px);
}

效果图:

澳门新萄京 4

它还辅助负数:

img{   object-fit: contain;   object-position: -10px calc(100% - 10px); }

1
2
3
4
img{
  object-fit: contain;
  object-position: -10px calc(100% - 10px);
}

效果图:

澳门新萄京 5

总之,object-position的风味表现与backgound-position一点差距也未有于相似的。

兼容性:点这里

到那边,这四个属性算是讲罢了,便是如此不难。

打赏协理作者写出越来越多好文章,多谢!

打赏小编

大器晚成、水平滚动条 和 垂直滚动条

澳门新萄京 6

1.1 宗旨本事点
1卡塔尔国求滚动条的长度? 2卡塔尔拖动滚动条,求内容要走多少?
滚动条的长短决意于滚动内容(滚动内容越长,滚动条越短);
情节滚动的偏离和滚动条走的相距是成倍数关系。
1.2 换算公式
获得滚动条的长度:
滚动条的长度 / 盒子的尺寸 = 盒子的尺寸 / 内容的长短**
滚动条长度 = ( 盒子的上升的幅度 / 内容的上升的幅度) * 盒子的宽度**
拖动滚动条,求内容走的尺寸:
剧情走的相距 / 滚动条走的相距 =(内容的尺寸 - 盒子的长短卡塔尔国 / (盒子长度

  • 滚动条的长度)**
    内容走的离开 = (内容的长短 - 盒子的长短卡塔 尔(英语:State of Qatar) / (盒子长度 - 滚动条的尺寸) * 滚动条走的相距
HTML结构
<div id="box">
         <ul id="box_content">
             <li><img src="images/img1.jpg" alt="澳门新萄京 7"></li>
             <li><img src="images/img2.jpg" alt="澳门新萄京 8"></li>
             <li><img src="images/img3.jpg" alt="澳门新萄京 9"></li>
             <li><img src="images/img4.jpg" alt="澳门新萄京 10"></li>
             <li><img src="images/img5.jpg" alt="澳门新萄京 11"></li>
             <li><img src="images/img6.jpg" alt="澳门新萄京 12"></li>
             <li><img src="images/img7.jpg" alt="澳门新萄京 13"></li>
             <li><img src="images/img8.jpg" alt="澳门新萄京 14"></li>
             <li><img src="images/img1.jpg" alt="澳门新萄京 15"></li>
             <li><img src="images/img2.jpg" alt="澳门新萄京 16"></li>
             <li><img src="images/img1.jpg" alt="澳门新萄京 17"></li>
             <li><img src="images/img2.jpg" alt="澳门新萄京 18"></li>
             <li><img src="images/img3.jpg" alt="澳门新萄京 19"></li>
             <li><img src="images/img4.jpg" alt="澳门新萄京 20"></li>
             <li><img src="images/img5.jpg" alt="澳门新萄京 21"></li>
             <li><img src="images/img6.jpg" alt="澳门新萄京 22"></li>
             <li><img src="images/img7.jpg" alt="澳门新萄京 23"></li>
             <li><img src="images/img8.jpg" alt="澳门新萄京 24"></li>
             <li><img src="images/img1.jpg" alt="澳门新萄京 25"></li>
             <li><img src="images/img2.jpg" alt="澳门新萄京 26"></li>
         </ul>
         <div id="box_bottom">

         </div>
     </div>

CSS样式
<style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            list-style-type: none;
        }

        #box{
            width: 900px;
            height: 180px;
            border: 1px solid #ccc;
            margin: 100px auto;

            position: relative;
            overflow: hidden;
        }

        #box_content{
           width: 2600px;
           height: 130px;
           position: absolute;
           top:10px;
           left:0;
        }

        #box_content li{
            float: left;
        }

        #box_bottom{
            width: 100%;
            height: 25px;
            background-color: #cccccc;

            position: absolute;
            left: 0;
            bottom: 0;
        }

        #progress{
            width: 100%;
            height: 100%;
            background-color: orangered;
            border-radius: 15px;

            position: absolute;
            cursor: pointer;
        }
    </style>

JS特效
<script>
    window.onload = function(){
        // 1. 获取需要的标签
        var box = document.getElementById('box');
        var box_content = document.getElementById('box_content');
        var box_bottom = document.getElementById('box_bottom');
        var progress = document.getElementById('progress');

        // 2. 设置滚动条的长度
        // 滚动条长度 = ( 盒子的宽度 / 滚动内容的宽度) * 盒子的宽度
        var pLength = (box.offsetWidth / box_content.offsetWidth) * box.offsetWidth;
        progress.style.width = pLength   'px';

        // 3.监听按下事件
        progress.onmousedown = function(event){
            var event = event || window.event;

            // 3.1 获取起始位置
            var startX = event.clientX - progress.offsetLeft;

            // 3.2 移动事件
            document.onmousemove = function(event){
                var event = event || window.event;
                var endX =  event.clientX - startX;

                // 碰撞检测
                if(endX < 0){
                    endX = 0;
                }else if(endX >= box.offsetWidth - progress.offsetWidth){
                    endX = box.offsetWidth - progress.offsetWidth;
                }

                // 3.3 赋值
                progress.style.left = endX   'px';

                // 3.4 内容走起来
                // 内容走的距离 = (内容的长度 - 盒子的长度) / (盒子长度 - 滚动条的长度) * 滚动条走的距离
                var c_length = (box_content.offsetWidth - box.offsetWidth) /(box.offsetWidth - progress.offsetWidth) * endX;
                box_content.style.left = -c_length   'px';

                return false;
            };

            // 3.5 松开鼠标
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            };

            return false;
        }
    }
</script>

澳门新萄京 27

展示图

jQuery完结瀑布流布局,jquery瀑布布局

HTML

复制代码 代码如下:

 <div id="main">
         <div class="box">
             <div class="pic">
                 <img src="images/0.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/1.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/2.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/4.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/2.jpg" alt="">
             </div>
         </div>
 </div>

CSS

复制代码 代码如下:

 * {
     margin: 0;
     padding: 0;
 }
 #main {
     position: relative;
 }
 .box {
     padding:15px 0 0 15px;
     float:left;
 }
 .pic {
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
     box-shadow: 0px 0px 5px #ccc;
     img {
         width:165px;
         height:auto;
     }
 }

JavaScript

复制代码 代码如下:

 $(window).on("load",function () {
     waterfall();
     var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}
     //模拟json数据;
     $(window).on("scroll",function () {
         if(checkScrollSlide){
             $.each(dataInt.data,function (key,value) {
                 var oBox=$("<div>").addClass("box").appendTo($("#main"));
                 //jQuery帮忙过渡,隐式迭代;
                 var oPic=$("<div>").addClass('pic').appendTo($(oBox));
                 $("<img>").attr("src","images/" $(value).attr("src")).appendTo(oPic);
             });
             waterfall();
         }
     })
 });
 //流式布局主函数;
 function waterfall () {
     var $boxs=$("#main>div");
     //获取#main成分下的一向子成分div.box;
     //获取每一列的大幅度;
     var w=$boxs.eq(0).outerWidth();
     //outerWidth()获取蕴涵padding和border在内的大幅度;
     //var w=$boxs.eq(0).width();
     //width()只好获取给成分定义的小幅;
     var cols=Math.floor($(window).width()/w);
     //获取多少列;
     $("#main").width(w*cols).css("margin","0 auto");
     //设置#main成分的宽窄和居中样式;
     var hArr=[];
     //每一列中度的集聚;
     $boxs.each(function (index,value) {
     //遍历每一个box成分;
     //为了找到从前全体因素的最低点,然后将本成分设置到最低点以下;
         var h=$boxs.eq(index).outerHeight();
         //每一个box成分的高,
         if (index<cols) {
             hArr[index]=h;
             //鲜明每列第一个要素的冲天;
         } else{
             var minH=Math.min.apply(null,hArr);
             //得出列高数组中的最小中度;
             var minHIndex=$.inArray(minH,hArr);
             //$.inArray()方法得出成分(minH)在数组(hArr)中的index值;
             //console.log(value);
             //此时的value是首先行未来的有着的box成分的DOM对象!;
             $(value).css({
             //$(value):将DOM对象转换来jQuery对象,才具继续选择jQuery方法;
                 "position":"absolute",
                 "top":minH "px",
                 "left":minHIndex*w "px"
             });
             hArr[minHIndex] =$boxs.eq(index).outerHeight();
             //最低高成分的万丈 刚增加到最低中度下的因素的高度=新的列高;
         };
     });
     // console.log(hArr);
 };
 function checkScrollSlide () {
     var $lastBox=$("#main>div").last();
     var lastBoxDis=$lastBox.offset().top Math.floor($lastBox.outerHeight()/2);
     var scrollTop=$(window).scrollTop();
     var documentH=$(window).height();
     return (lastBoxDis<scrollTop documentH)?true:false;
 }

详见表明清细心参考注释吧,小编就不独立再拉出去写了。

HTML 复制代码 代码如下: div id="main" div class="box" div class="pic" img src="images/0.jpg" alt="" /div /div div class="bo...

CSS position:absolute浅析,absolute浅析

生龙活虎、相对定位的表征

绝对定位有所与变化同样的特色,即包裹性和破坏性。

就破坏性来说,浮动仅仅破坏了成分的惊人,保留了成分的宽窄;而绝对定位的因素中度和幅度都不曾了。

请看上边代码:

澳门新萄京 28 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>相对定位的性状</title> 6 <style> 7 .box1,.box2,.box3 { 8 background-color: orange; 9 margin-bottom: 30px; 10 } 11 12 .absolute { 13 position: absolute; 14 } 15 16 .wraper { 17 display:inline-block; 18 margin-left: 300px; 19 } 20 21 .float { 22 float: left; 23 } 24 25 .box3 { 26 position: absolute; 27 } 28 </style> 29 </head> 30 <body> 31 <div class="box1"> 32 <img src="" alt="A picture" style="width:175px;height:100px" /> 33 <img src="" alt="A picture" style="width:240px;height:180px" /> 34 <p>那是不足为怪流中的两幅图像。</p> 35 </div> 36 <div class="box2"> 37 <img class="absolute" src="" alt="A picture" style="width:175px;height:100px" /> 38 <img src="" alt="A picture" style="width:240px;height:180px" /> 39 40 <div class="wraper"> 41 <img class="float" src="" alt="A picture" style="width:175px;height:100px" /> 42 <img src="" alt="A picture" style="width:240px;height:180px" /> 43 </div> 44 <p>左图,将首先幅图像相对定位,其完全脱离文书档案流,并且覆盖在其次幅图像之上;由此来看,相对定位的破坏性不唯有让要素未有了可观,以致从不了升幅。</p> 45 <p>右图,将率先幅图像左浮动,其固然脱离了文书档案流,不过并未隐蔽在其余因素之上;浮动的破坏性仅仅破坏了成分的莫大,而保留了成分的拉长率。</p> 46 </div> 47 <div class="box3"> 48 <img src="" alt="A picture" style="width:175px;height:100px" /> 49 <img src="" alt="A picture" style="width:240px;height:180px" /> 50 <p>将容器相对定位,显示其包裹性。</p> 51 </div> 52 </body> 53 </html> View Code

 

二、相对定位的平常法规:

要素绝对定位时,会完全分离文书档案流,并相对于其蕴涵块定位。

相对定位的包罗块,是其多年来的已定位的先世成分。

风流倜傥旦那一个祖先成分是块级成分,包括块则为该祖先元素的内边距边界,即边框。

假诺这么些祖先成分是行内成分,包蕴块则为该祖先成分的内容边界,即内容区。

假如没有已定位的先世成分,成分的包括块定义为发端富含块。

偏移属性:top、right、bottom、left。

万风度翩翩相对定位的要素未有安装偏移属性,即便脱离文书档案流,可是它的义务是原地不动的。

偏移属性可以为负值,将成分定位到含有块之外。

代码在那处:

澳门新萄京 29 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>相对定位的平日法则</title> 6 <style> 7 body { 8 background-color: #ccc; 9 } 10 .container { 11 width:500px; 12 background-color: orange; 13 margin:20px auto 50px auto; 14 padding:20px; 15 border:2px solid red; 16 } 17 18 .box2 img,.box3 img, 19 .box4 img,.box5 img { 20 position: absolute; 21 } 22 23 .box3 img,.box4 img { 24 left:0; 25 bottom:0; 26 } 27 28 .box5 img { 29 left: -30px; 30 bottom: -50px; 31 } 32 33 .block { 34 position :relative; 35 height: 200px; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="container"> 41 <div class="box1"> 42 <p>成分相对定位时,会全盘脱离文档流,并相对于其蕴藉块定位。相对定位的蕴涵块,是其这几天的已定位的上代成分。</p> 43 <img src="" alt="A picture" style="width:175px;height:100px" /> 44 <ul> 45 <li>如若那一个祖先成分是块级元素,包涵块则为该祖先成分的内边距边界,即边框。</li> 46 <li>如若那个祖先成分是行内成分,富含块则为该祖先成分的源委边界,即内容区。</li> 47 <li>若无已牢固的祖宗成分,成分的包涵块定义为起头包括块(三个视窗大小的矩形卡塔 尔(英语:State of Qatar)。</li> 48 </ul> 49 </div><!--关闭box1--> 50 </div><!--关闭container--> 51 <div class="container"> 52 <div class="box2"> 53 <p>不管有未有大器晚成度定位的先世成分,只要未有偏移量,相对定位之后,原地不动,脱离文书档案流。</p> 54 <p>上边那一个已经相对定位的图像原地没动,但是曾经退出了文书档案流。</p> 55 <img src="" alt="A picture" style="width:175px;height:100px" /> 56 </div><!--关闭box2--> 57 </div><!--关闭container--> 58 <div class="container"> 59 <div class="box3"> 60 <p>未有已经定位的古代人成分,有偏移量,相对定位之后,以开端包含块(二个视窗大小的矩形卡塔尔国为法则实行偏移。</p> 61 <p>当偏移量为left:0; buttom:0时,图像水平偏移到了开班富含块左下角(展开网页最开首的那个视窗的左下角卡塔 尔(阿拉伯语:قطر‎。</p> 62 <img src="" alt="A picture" style="width:175px;height:100px" /> 63 </div><!--关闭box3--> 64 </div><!--关闭container--> 65 <div class="container block"> 66 <div class="box4"> 67 <p>有大器晚成度固化的古代人成分,有偏移量,相对定位之后,以业已定位的先世成分为条件举办偏移。</p> 68 <p>此处已经稳定的上代元素为这么些图像的器皿div成分,偏移量为left:0; bottom:0时,图像到了那些容器的左下角(以边框为界卡塔尔。</p> 69 <img src="" alt="A picture" style="width:175px;height:100px" /> 70 </div><!--关闭box4--> 71 </div><!--关闭container--> 72 <div class="container block"> 73 <div class="box5"> 74 <p>有后生可畏度固定的古时候的人成分,有偏移量,绝对定位之后,以业已稳固的先世成分为尺度举行偏移。</p> 75 <p>此处已经定位的祖宗元素为这一个图像的器皿div成分,偏移量为left:-30px; bottom:-50px时,图像到了那一个容器之外(以边框为界卡塔 尔(英语:State of Qatar)。</p> 76 <img src="" alt="A picture" style="width:175px;height:100px" /> 77 </div><!--关闭box5--> 78 </div><!--关闭container--> 79 </body> 80 </html> View Code

 

 三、用margin调度相对定位成分的职位

相对定位的因素,除了能够行使top、right、bottom、left举行偏移之外,还是能够由此margin值举办准明显位,并且自适应性更加好。

示例:

澳门新萄京 30 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>用margin调解相对定位元素的岗位</title> 6 <style> 7 .box1,.box2,.box3 { 8 display: inline-block; 9 margin-right: 150px; 10 border:1px solid blue; 11 } 12 13 span { 14 background-color: red; 15 } 16 17 .box2 span,.box3 span { 18 position: absolute; 19 } 20 21 .meng { 22 margin-left: -3em; 23 } 24 25 .box4 { 26 border:1px solid red; 27 width: 500px; 28 margin: 50px auto 0 auto; 29 padding:20px; 30 } 31 32 li { 33 margin-bottom: 20px; 34 } 35 </style> 36 </head> 37 <body> 38 <div class="box1"> 39 <span>卡哇伊</span> 40 <img src="" style="width:200px;height:300px" /> 41 <span>萌萌哒</span> 42 </div> 43 <div class="box2"> 44 <span>卡哇伊</span> 45 <img src="" style="width:200px;height:300px" /> 46 <span>萌萌哒</span> 47 </div> 48 <div class="box3"> 49 <span>卡哇伊</span> 50 <img src="" style="width:200px;height:300px" /> 51 <span class="meng">萌萌哒</span> 52 </div> 53 <div class="box4"> 54 <ol> 55 <li>第意气风发幅图,最先叶的标准。</li> 56 <li>第二幅图,多少个标签相对定位,但是不点名其余偏移量。</li> 57 <li>第三幅图,用margin负值调节“萌萌哒”的职务,实现。</li> 58 </ol> 59 </div> 60 </body> 61 </html> View Code

放任偏移属性而改用margin来调治相对定位成分,其原理在于:

纯属定位的因素,在不安装偏移量的时候,它固然完全退出了文书档案流,但它还在原先的任务。

接纳偏移属性进行正鲜明位,其具体地方是在意绝对定位成分的隐含块,分裂的隐含块将会有一起不相似的原则性结果。

而利用margin实行正鲜明位,不重视于别的其余东西,越发可控。

在写那篇博文的时候,absolute让本身给relative带话,它说:“relative,你给本身滚好啊,小编这一辈子都不想见到你!”

预言后事如何,请移步relative篇,感谢!

 

四、绝对定位与总体布局

何以用相对定位来对页面实行总体布局?

由此可以知道残酷,不学就浪费啊!!!

澳门新萄京 31 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>相对定位与欧洲经济共同体页面布局</title> 6 <style> 7 * { 8 margin: 0; 9 }/*重新载入参数全体margin为0,这一步特别主要,不然布局必乱。*/ 10 11 html,body,.page { 12 width: 100%; 13 height: 100%; 14 overflow: hidden; 15 } 16 17 .page { 18 position: absolute; 19 top: 0; 20 right: 0; 21 bottom: 0; 22 left: 0; 23 background-color: #ccc; 24 } 25 26 .header { 27 position: absolute; 28 height: 50px; 29 left: 0; 30 right: 0; 31 background-color: purple; 32 padding: 0 5px; 33 z-index: 1; 34 } 35 36 .header>h1 { 37 line-height: 50px; 38 text-align: center; 39 } 40 41 .aside { 42 position: absolute; 43 top: 50px; 44 bottom: 50px; 45 left: 0; 46 width: 100px; 47 background-color: orange; 48 } 49 50 .footer { 51 position: absolute; 52 right: 0; 53 bottom: 0; 54 left: 0; 55 height: 50px; 56 background-color: purple; 57 } 58 59 .footer>h1 { 60 text-align: center; 61 line-height: 50px; 62 } 63 64 .content { 65 position: absolute; 66 top: 50px; 67 right: 0; 68 bottom: 50px; 69 left: 100px; 70 background-color: cyan; 71 overflow: auto; 72 } 73 74 .content h1 { 75 margin-top: 100px; 76 margin-left: 50px; 77 } 78 79 .content li { 80 margin-left: 100px; 81 margin-top: 80px; 82 font-size: 24px; 83 line-height: 1.5; 84 } 85 86 ol { 87 margin-bottom: 80px; 88 } 89 </style> 90 </head> 91 <body> 92 <div class="page"> 93 <div class="header"> 94 <h1>Header</h1> 95 </div> 96 <div class="aside"> 97 <h1>Aside</h1> 98 </div> 99 <div class="content"> 100 <h1>实现原理</h1> 101 <ol> 102 <li>创立三个div.page,相对定位,铺满全屏。</li> 103 <li>成立一个div.header,相对定位,设定中度。</li> 104 <li>创建一个div.aside,相对定位,设定宽度。</li> 105 <li>创造三个div.footer,相对定位,设定中度。</li> 106 <li>创制一个div.content,相对定位,依据附近div的宽高设定它的宽高;<br /> 107 以div.content成分代替原body成分,全部的页面内容都投身那之中。</li> 108 </ol> 109 </div> 110 <div class="footer"> 111 <h1>Footer</h1> 112 </div> 113 </div> 114 </body> 115 </html> View Code

 

position:absolute浅析,absolute浅析 大器晚成、绝对定位的性状 绝对定位有所与变化同样的特征,即包裹性和破坏性。 就破坏性来说,浮动仅仅破...

HTML(注意包装涉及,方便js调用)

打赏支持本身写出愈来愈多好文章,多谢!

任选大器晚成种支付方式

澳门新萄京 32 澳门新萄京 33

1 赞 收藏 评论

二、内置对象document

  • Document 对象是 Window 对象的一片段,可经过 window.document 属性对其进展拜访

  • Document 对象使我们能够从剧本中对 HTML 页面中的全部因素进行会见:

document.head(获取尾部卡塔 尔(英语:State of Qatar)
document.body(获取身体卡塔 尔(英语:State of Qatar)
document.title (获取标题卡塔 尔(英语:State of Qatar)
document.documentElement(获取整个html)

  • Document.compatMode:
    BackCompat:标准卓殊格局关闭
  • 浏览器宽度:document.body.clientWidth

复制代码 代码如下:

有关小编:TGCode

澳门新萄京 34

路途虽远,无所畏 个人主页 · 笔者的篇章 · 9 ·    

澳门新萄京 35

CSS1Compat:规范十二分格局开启

  • 浏览器宽度:document.documentElement.clientWidth

  • BackCompat 对应 quirks mode(离奇方式) , CSS1Compat 对应 strict mode (严刻情势) :

前期的浏览器Netscape 4和Explorer 4对css实行剖释时,并未有遵循W3C规范,那时的分析方法就被我们誉为quirks mode(怪异形式),但随着W3C的业内进一层主要,众多的浏览器开端依照W3C标准拆解解析CSS,仿照W3C标准分析CSS的格局大家称为strict mode(严谨格局) 。

 <body>
     <div id="main">
         <div class="box">
             <div class="pic">
                 <img src="images/0.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/1.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/2.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/4.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/2.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/4.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/5.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/6.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/7.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/4.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/5.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/4.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/5.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/6.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/7.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
     </div>
 </body>

三、scroll家族

LESS(less预编译)

3.1 基本概念

  • 网页正文全文宽: document.body.scrollWidth;

  • 网页正文全文高: document.body.scrollHeight;

  • 网页被卷去的高: document.body.scrollTop;

  • 网页被卷去的左: document.body.scrollLeft;

  • 在实际支出中利用相当多的正是scrollTop,如下图:

澳门新萄京 36

复制代码 代码如下:

3.2 管理scroll亲族浏览器适配难点

 * {
     margin: 0;
LESS达成瀑布流,商品呈现特效。     padding: 0;
 }
 #main {
     position: relative;
 
 }
 .box {
     padding:15px 0 0 15px;
     float:left;
 }
 .pic {
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
     box-shadow: 0px 0px 5px #ccc;
     img {
         width:165px;
         height:auto;
     }
 }

ie9 和 最新浏览器

window.pageXOffset; (scrollLeft)
window.pageYOffset; (scrollTop)

- **Firefox浏览器 和 其他浏览器**
`document.documentElement.scrollTop;`

- **Chrome浏览器 和 没有声明 DTD <DOCTYPE >**
`document.body.scrollTop;`

- **兼容写法**
>var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

###3.3 scrollTo(x,y)
- 把内容滚动到指定的坐标

- `格式:scrollTo(xpos,ypos)`
 - - xpos 必需;要在窗口文档显示区左上角显示的文档的 x 坐标;

 - - ypos 必需;要在窗口文档显示区左上角显示的文档的 y 坐标 。

- 网页大部分都没有水平滚动条,所以,这个x 不太常用。

##四、什么是Json?
>[JSON](http://baike.baidu.com/view/136475.htm)([JavaScript](http://baike.baidu.com/view/16168.htm) Object Notation) 是一种轻量级的数据交换格式。它基于[ECMAScript](http://baike.baidu.com/view/810176.htm)的一个子集。相比于XML,json易于人阅读和编写,同时也易于机器解析和生成,目前数据传递基本上都使用json。

-  JSON有两种结构:对象 和 数组,两种结构相互组合从而形成各种复杂的数据结构。

- -数据在键值对中

-  数据由逗号分隔

- 花括号保存对象

- 方括号保存数组

{ id: '100000', text: '商丘银行总行', children: [

{
id: '110000',
text: '黄冈分行',
children: [
{
id: '113000',
text: '唐山银行开垦区支行',
leaf: true
},
{
id: '112000',
text: '大庆银行解放道支行',
children: [
{
id: '112200',
text: '驻马店银行三马路支行',
leaf: true
},
{
id: '112100',
text: '海口银行广阳道支行',
leaf: true
}
]
},
{
id: '111000',
text: '济宁银行金光道支行',
leaf: true
}
]
}
] }

 - http://c.m.163.com/nc/article/BVEGO8UT05299OU6/full.html
##五、实现瀑布流滚动

![示例图](http://upload-images.jianshu.io/upload_images/1333977-3ccf3288fde30684.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

HTML结构

<link rel="stylesheet" href="css/index.css">
<div id="main">
<div class="box"><div class="pic"><img src="images/0.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/1.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/2.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/3.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/4.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/5.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/6.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/7.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/8.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/9.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/10.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/11.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/12.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/13.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/14.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/15.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/16.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/17.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/18.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/19.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/20.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/21.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/22.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/23.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/24.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/25.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/26.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/27.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/28.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/29.jpg" alt=""></div></div>
</div>
<script src="js/MyFunc.js"></script>
<script src="js/index.js"></script>

CSS样式

*{
margin: 0;
padding: 0;
澳门新萄京,}

img{
vertical-align: top;
}

JavaScript(本人清楚的注释)

main{

/*用于子盒子定位*/
position: relative;

}

.box{
float: left;
padding: 15px 0 0 15px;
/background-color: red;/
}

.pic{
padding: 10px;
background-color: #ffffff;
border: 1px solid #ccc;
border-radius: 5px;
}

.pic img{
width: 165px;
}

JS特效

/**

  • Created by Administrator on 2016/12/29.
    /
    /
    *

  • 当页面加载达成
    */
    window.onload = function(){
    // 1. 达成瀑布流布局
    waterFall('main', 'box');
    // 2. 滚动加载盒子
    window.onscroll = function(){
    // 2.1 决断是不是富有加载新盒子的尺度
    if(checkWillLoadNewBox()){ // 加载新的盒子
    // 2.2 造数据
    var dataArr = [
    {src: '19.jpg'},
    {src: '32.jpg'},
    LESS达成瀑布流,商品呈现特效。{src: '7.jpg'},
    {src: '9.jpg'},
    {src: '13.jpg'},
    {src: '15.jpg'},
    {src: '17.jpg'},
    {src: '19.jpg'}
    ];

         // 2.3 根据数据创建新的盒子
         for(var i=0; i<dataArr.length; i  ){
             var newBox = document.createElement('div');
             newBox.className = 'box';
             $('main').appendChild(newBox);
    
             var newPic = document.createElement('div');
             newPic.className = 'pic';
             newBox.appendChild(newPic);
    
             var newImg = document.createElement('img');
             newImg.src = 'images/'  dataArr[i].src;
             newPic.appendChild(newImg);
         }
    
         // 2.4 实现瀑布流布局
         waterFall('main', 'box');
     }
    

    }
    };

/**

  • 兑现瀑布流布局

  • @param parent 父元素id

  • @param child 子元素class
    */
    function waterFall(parent, child){
    // ---- 父盒子居中 ---
    // 1. 获得持有的盒子
    var allBox = $(parent).getElementsByClassName(child);
    // 2. 求出在那之中三个盒子的肥瘦
    var boxWidth = allBox[0].offsetWidth;
    // 3. 求出显示器的增长幅度
    var clientW = document.documentElement.clientWidth || document.body.clientWidth;
    // 4. 求出列数
    var cols = parseInt(clientW / boxWidth);
    // 5.让父盒子居中
    $(parent).style.width = cols * boxWidth 'px';
    $(parent).style.margin = '0 auto';

    // ---- 子盒子的永远 ---
    var heightArr = [];
    // 1.遍历全部的盒子
    for(var i=0; i<allBox.length; i ){
    // 1.1 得到具备盒子的惊人
    var boxHeight = allBox[i].offsetHeight;
    // 1.2 把第豆蔻梢头行盒子的万丈放入数组
    if(i < cols){
    heightArr.push(boxHeight);
    }else { // 剩余的盒子
    var minBoxHeight = Math.min.apply(null, heightArr);
    var minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);
    // 子盒子定位
    allBox[i].style.position = 'absolute';
    allBox[i].style.left = minBoxIndex * boxWidth 'px';
    allBox[i].style.top = minBoxHeight 'px';
    // 更新的高峰度
    heightArr[minBoxIndex] = boxHeight;
    }
    }
    }

/**

  • 获得最小索引
  • @param arr 数组
  • @param val 元素
    */
    function getMinBoxIndex(arr, val){
    for(var i=0; i<arr.length; i ){
    if(arr[i] == val) return i;
    }
    }

/**

  • 看清是或不是顺应加载条件
    /
    function checkWillLoadNewBox(){
    // 1. 收获最终三个盒子
    var allBox = $('main').getElementsByClassName('box');
    var lastBox = allBox[allBox.length - 1];
    // 2. 求出最终一个盒子中度的二分一 offsetTop
    var lastBoxDis = lastBox.offsetHeight
    0.5 lastBox.offsetTop;
    // 3. 求出显示器的万丈
    var clientH = document.documentElement.clientHeight || document.body.clientHeight;
    // 4. 求出滚动的莫斯中国科学技术大学学
    var scrollTop = scroll().top;
    /console.log(lastBoxDis, clientH, scrollTop);/
    // 5. 论断重回
    return clientH scrollTop >= lastBoxDis;
    }

MyFunc.js

/**

  • Created by Administrator on 2016/12/29.
    /
    /
    *
  • 收获滚动的尾部 和 左侧 偏离地方
  • @returns {头部, 左边}
  • scroll().top scroll().left
    */
    function scroll(){
    if(window.pageXOffset != null){ // ie9 和 最新浏览器
    return {
    top: window.pageYOffset,
    left: window.pageXOffset
    }
    }else if(document.compatMode == 'CSS1Compat'){ // 遵循W3C
    return {
    top: document.documentElement.scrollTop,
    left: document.documentElement.scrollLeft
    }
    }
    return {
    top: document.body.scrollTop,
    left: document.body.scrollLeft
    }
    }

/**

  • 基于id飞快获得标签
  • @param id
  • @returns {Element}
    */
    function $(id){
    return document.getElementById(id);
    }
![瀑布流特效](http://upload-images.jianshu.io/upload_images/1333977-81da10d6ea9beedc.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

(函数存在一定劣势,仅用于学习明白)

复制代码 代码如下:

 window.onload = function () {
     waterfall("main","box");
     //调用自定义函数;作用于main下的每四个box成分;
     var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}
     //模拟json数据;
     window.onscroll = function () {
         if (checkScrollSlide) {
         //调用自定义函数;依据函数重回值显明滚动是或不是超过范围;
             var oParent = document.getElementById("main");
             for (var i = 0; i < dataInt.data.length; i ) {
                 var oBox = document.createElement("div");
                 oBox.className = "box";
                 oParent.appendChild(oBox);
                 //创建box块
                 var oPic = document.createElement("div");
                 oPic.className = "pic";
                 oBox.appendChild(oPic);
                 //创建pic块
                 var oImg = document.createElement("img");
                 //创建img元素
                 oImg.src = "images/" dataInt.data[i].src;
                 //设置图片援用;
                 oPic.appendChild(oImg);
             };
             waterfall("main","box");
             //将动态变化的数码块进行流式布局;
         };
     };
 };
 //流式布局主函数,自动调解数据块之处;
 function waterfall (parent,box) {
     //将main下的具有box成分收取;"parent"代表父级,box代表box成分;
     var oParent = document.getElementById(parent);
     //将父级成分赋值给变量oParent;
     var oBoxs = getByClass(oParent,box);
     //通过自定义函数,获取父级下的每二个box成分;获得的是持有box成分的集合;
     //再一次将以此获得的box成分的汇聚赋值给oBoxs;(因为功用域难题,变量不共用);
     // console.log(oBoxs.length);
     //在调控新北打字与印刷出box成分的多少,用于调节和测验;
     var oBoxW = oBoxs[0].offsetWidth;
     //总计出每一列的小幅;offsetWidth满含内边距在内的增长幅度;
     // console.log(oBoxW);测试;
     var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
     //计算整个页面展现的列数(页面宽/box的宽);
     oParent.style.cssText = "width:" oBoxW*cols "px;margin:0 auto";
     //父成分main的宽窄=每一列的宽*列数;而且左右居中;
     var hArr = [];
     //存放每一列中度的数组;
     for (var i = 0; i < oBoxs.length; i ) {
     //遍历oBoxs数组;
         if (i<cols) {
         //这里契合条件的是第黄金时代行的每列的首先个;
             hArr.push(oBoxs[i].offsetHeight);
             //得出每一列的可观归入数组中;
         }else{
         //这里的box成分已经不是率先行的要素了;
             var minH = Math.min.apply(null,hArr);
             //得出第大器晚成行的细小中度并赋值给变量;
             // console.log(minH);
             var index = getMinhIndex(hArr,minH);
             //调用自定义函数获取那些变量的index值;
             oBoxs[i].style.position = "absolute";
             oBoxs[i].style.top = minH "px";
             oBoxs[i].style.left = oBoxW*index "px";
             //设置当前因素的岗位;
             //当前元素的left值=顶上的因素的index值*每列的肥瘦;
             //oBoxs[i].style.left = oBoxs[index].offsetLeft "px";
             //第二种拿到当前因素的left值;
             //此时在第index列加多了一个box成分;
             hArr[index] =oBoxs[i].offsetHeight;
             //每一列更新后的冲天=每一列原本的冲天 后来增添的box成分的万丈;
         };
     };
 };
 //js原生通过Class获取成分;
 function getByClass (parent,claName) {
     //通过class获取成分;(在父级parent的容器下取得claName的因素;)
     var boxArr = new Array();
     //证明数组,用来累积获取到的装有class为box的要素;
     var oElements = parent.getElementsByTagName("*")
     //阐明变量用来囤积此父成分下的保有子成分(*);
     for (var i = 0; i < oElements.length; i ) {
     //遍历数组oElements;
         if (oElements[i].className==claName) {
         //如若数组中的某一个因素的calss类与参数claName相通;
             boxArr.push(oElements[i]);
             //则把遍历到的那个box成分归类到boxArr数组;
         };
     };
     return boxArr;
     //调用数组后,经过风华正茂多种函数,遍历;将拿到的数组再次回到给调用的函数;
 };
 //获取数组成分的index值;
 function getMinhIndex (arr,val) {
 //arr是父级数组;val是日前成分;
     for(var i in arr){
     //从0初步遍历;
         if(arr[i]==val){
         //找到当前成分在数组中对应的index值;
             return i;
             //函数再次来到值便是当前成分的index值;
         };
     };
 };
 //检查评定是或不是持有了滚动加载数据块的标准;
 function checkScrollSlide () {
     var oParent = document.getElementById("main");
     var oBoxs = getByClass(oParent,"box");
     var lastBoxH = oBoxs[oBoxs.length-1].offsetTop Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
     //最后叁个box元素间距页面顶上部分的冲天(找到尾数box(oBoxs.lenght-1)的offsetTop) 本身的四分之二;
     var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
     //浏览器滚动条滚动的偏离;
     // console.log(scrollTop);
     var height = document.body.clientHeight || document.documentElement.clientHeight;
     //浏览器视口的可观;
     // console.log(height);
     return (lastBoxH<scrollTop height)?true:false;
     //页面滚动的偏离是不是超越最终三个box成分的offsetTop;
 };

总结:

用瀑布流来表现照片再好可是了,下边是瀑布流(每风流倜傥行的长短等于浏览器窗口的长短卡塔尔国的风姿罗曼蒂克种达成情势,也得以用css3落到实处,极粗略,Google时而您就清楚。
自身的思路大约是一王晓龙张的图纸插入,当这风流罗曼蒂克行的图形保持长度宽度比例不改变并且中度低于250时就完了三个了循环,即那意气风发行插入进去了,。
下一场步向下三个生生不息插入下风流倜傥行。

你或然感兴趣的篇章:

  • js完结的名媛瀑布流效果代码
  • javascript自适应宽度的瀑布流完毕思路
  • 纯js实现瀑布流表现照片(自动适应窗口大小)
  • 深入分析瀑布流布局:JS 相对固定的实现
  • js达成瀑布流的生龙活虎种简单方法实例共享
  • 原生JS达成响应式瀑布流布局
  • 原生JavaScript实现瀑布流布局
  • 基于JavaScript达成瀑布流布局
  • 基于JavaScript达成瀑布流布局(二)
  • 详明javascript达成瀑布流绝对式布局

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:LESS达成瀑布流,商品呈现特效

上一篇:jquery基础教程,移动端h5开发相关内容总结 下一篇:没有了
猜你喜欢
热门排行
精彩图文