打赏支持我写出更多好文章,谢谢!

任选一种支付方式

bet36365注册送奖金 1
bet36365注册送奖金 2

1 赞 收藏
评论

3.2 处理scroll家族浏览器适配问题

聊聊 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,
    最终呈现的是尺寸比较小的那个。

不好意思,我又要摆妹子来诱惑你们了,看效果图:

bet36365注册送奖金 3

上面的五个例子的代码:

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

效果图:

bet36365注册送奖金 4

例如:替换元素相对于左下角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;
}

效果图:

bet36365注册送奖金 5

当然,你也可以使用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);
}

效果图:

bet36365注册送奖金 6

它还支持负数:

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

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

效果图:

bet36365注册送奖金 7

总之,object-position的特性表现与backgound-position一样一样的。

兼容性:点这里

到这里,这两个属性算是讲完了,就是这么简单。

打赏支持我写出更多好文章,谢谢!


打赏作者

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(严格模式) 。

关于作者:TGCode

bet36365注册送奖金 8

路途虽远,无所畏
个人主页
·
我的文章
·
9
·
   

bet36365注册送奖金 9

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’},
    {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%7CimageView2/2/w/1240)

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%7CimageView2/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;
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图