jQuery实现瀑布流布局,商品展现特效

by admin on 2019年4月17日

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

2016/11/22 · CSS ·
CSS3

正文小编: 伯乐在线 –
TGCode
。未经笔者许可,禁止转发!
欢迎参与伯乐在线 专辑撰稿人。

前不久间接无暇将JavaScript学习的笔记整理成都电子通信工程高校子书,也没怎么空闲时间写新的稿子。趁着今日有点空闲,决定再来折腾一下CSS3中的四个属性:object-fitobject-position

那三个奇葩的天性是做什么的呢?其实它们是为着处理替换元素(replaced
elements)的自适应难点,简单来讲,正是处理替换来分的变形(这里指长度宽度比例变形)难题。

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

  • 其剧情不受CSS视觉格式化模型调节的因素,比如image,嵌入的文书档案(iframe之类)或许applet,叫做替换来分。比:img成分的始末壹般会被其src属性钦点的图像替换掉。替换到分平日有其本来的尺码:三个原始的大幅度,3个原始的万丈和三个土生土长的比值。比如1幅位图有固有用绝对单位钦点的升幅和惊人,从而也有固有的宽高比率。另一方面,别的文书档案也说不定未有原来的尺码,比如一个空荡荡的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
    覆盖,保持原来的尺寸比例,保障内容区域被填满。因而,可替换来分或然会被切掉1部分,从而不可能全体呈现。
  • none : 保持可替换到分原尺寸和比重。
  • scale-down : 等比收缩。就象是依次安装了none或contain,
    最后展现的是尺寸相比较小的那一个。

害羞,笔者又要摆妹子来吸引你们了,看效果图:

必发88 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;
}

效果图:

必发88 2

比如说:替换到分相对于左下角拾px 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;
}

效果图:

必发88 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);
}

效果图:

必发88 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);
}

效果图:

必发88 5

总之,object-position的本性表现与backgound-position同等同等的。

兼容性:点这里

到此地,那七个脾性算是讲完了,正是那般轻巧。

打赏支持笔者写出越来越多好作品,谢谢!

打赏小编

一、水平滚动条 和 垂直滚动条

必发88 6

一.一 宗旨技能点
一)求滚动条的尺寸? 二)拖动滚动条,求内容要走多少?
滚动条的尺寸取决于滚动内容(滚动内容越长,滚动条越短);
剧情滚动的距离和滚动条走的离开是成倍数关系。
一.二 换算公式
赢得滚动条的长度:
滚动条的长短 / 盒子的长度 = 盒子的长度 / 内容的长度**
滚动条长度 = ( 盒子的大幅 / 内容的小幅度) * 盒子的宽窄**
拖动滚动条,求内容走的尺寸:
情节走的距离 / 滚动条走的离开 =(内容的尺寸 – 盒子的长短) / (盒子长度

  • 滚动条的尺寸)**
    剧情走的偏离 = (内容的尺寸 – 盒子的尺寸) / (盒子长度 – 滚动条的长短)
    * 滚动条走的离开
HTML结构
<div id="box">
         <ul id="box_content">
             <li><img src="images/img1.jpg" alt="必发88 7"></li>
             <li><img src="images/img2.jpg" alt="必发88 8"></li>
             <li><img src="images/img3.jpg" alt="必发88 9"></li>
             <li><img src="images/img4.jpg" alt="必发88 10"></li>
             <li><img src="images/img5.jpg" alt="必发88 11"></li>
             <li><img src="images/img6.jpg" alt="必发88 12"></li>
             <li><img src="images/img7.jpg" alt="必发88 13"></li>
             <li><img src="images/img8.jpg" alt="必发88 14"></li>
             <li><img src="images/img1.jpg" alt="必发88 15"></li>
             <li><img src="images/img2.jpg" alt="必发88 16"></li>
             <li><img src="images/img1.jpg" alt="必发88 17"></li>
             <li><img src="images/img2.jpg" alt="必发88 18"></li>
             <li><img src="images/img3.jpg" alt="必发88 19"></li>
             <li><img src="images/img4.jpg" alt="必发88 20"></li>
             <li><img src="images/img5.jpg" alt="必发88 21"></li>
             <li><img src="images/img6.jpg" alt="必发88 22"></li>
             <li><img src="images/img7.jpg" alt="必发88 23"></li>
             <li><img src="images/img8.jpg" alt="必发88 24"></li>
             <li><img src="images/img1.jpg" alt="必发88 25"></li>
             <li><img src="images/img2.jpg" alt="必发88 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>

必发88 27

展示图

CSS position:absolute浅析,absolute浅析

①、相对定位的特色

纯属定位有所与转移一样的性状,即包裹性和破坏性。

就破坏性来说,浮动仅仅破坏了成分的可观,保留了成分的小幅;而相对定位的成分中度和宽窄都未有了。

请看上面代码:

必发88 28 1
<!DOCTYPE html> 2 <html> 3 <head> 肆 <meta
charset=”utf-八”> 伍 <title>相对定位的风味</title> 6<style> 7 .box一,.box贰,.box3 { 八 background-color: orange; 玖margin-bottom: 30px; 十 } 1一 1贰 .absolute { 13 position: absolute; 14 }
1伍 1陆 .wraper { 一七 display:inline-block; 1八 margin-left: 300px; 1玖 } 20
贰① .float { 2贰 float: left; 二叁 } 二4 25 .box三 { 二陆 position: absolute; 二柒} 28 </style> 2九 </head> 30 <body> 3壹 <div
class=”box1″> 3二 <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> 3陆 <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=”jQuery实现瀑布流布局,商品展现特效。”
alt=”A picture” style=”width:175px;height:100px” /> 42 <img
src=”” alt=”A
picture” style=”width:240px;height:180px” /> 四3 </div> 44<p>左图,将第叁幅图像相对定位,其完全脱离文书档案流,并且覆盖在第一幅图像之上;因而来看,相对定位的破坏性不仅让要素未有了可观,甚至尚未了步长。</p>
四5<p>右图,将率先幅图像左浮动,其即便脱离了文书档案流,可是并从未覆盖在别的因素之上;浮动的破坏性仅仅破坏了成分的冲天,而保留了元素的增加率。</p>
四陆 </div> 四7 <div class=”box三”> 4八 <img
src=””
alt=”A picture” style=”width:175px;height:100px” /> 49 <img
src=”” alt=”A
picture” style=”width:240px;height:180px” /> 50
<p>将容器绝对定位,呈现其包裹性。</p> 5一 </div> 52</body> 伍三 </html> View
Code

 

贰、相对定位的貌似规则:

要素相对定位时,会全盘剥离文书档案流,并相对于其涵盖块定位。

相对定位的蕴藏块,是其近来的已定位的先世成分。

即使那些祖先成分是块级元素,包罗块则为该祖先成分的内边距边界,即边框。

假若那个祖先元素是行内成分,包蕴块则为该祖先成分的始末边界,即内容区。

jQuery实现瀑布流布局,商品展现特效。壹旦未有已稳固的先人成分,成分的含有块定义为开首包罗块。

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

倘若相对定位的因素未有设置偏移属性,尽管脱离文书档案流,然则它的职位是原地不动的。

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

代码在那边:

必发88 29 1
<!DOCTYPE html> 二 <html> 三 <head> 4 <meta
charset=”utf-八”> 伍 <title>相对定位的1般规则</title> 6<style> 七 body { 8 background-color: #ccc; 玖 } 10 .container { 11width:500px; 1二 background-color: orange; 一三 margin:20px auto 50px auto;
1四 padding:20px; 一5 border:二px solid red; 1陆 } 17 1八 .box二 img,.box三img, 1玖 .box四 img,.box5 img { 20 position: absolute; 21 } 2二 2叁 .box三img,.box4 img { 二四 left:0; 二5 bottom:0; 26 } 贰柒 2八 .box五 img { 2九 left:
-30px; 30 bottom: -50px; 3一 } 3二 33 .block { 3四 position :relative; 3伍height: 200px; 3六 } 三柒 </style> 3八 </head> 3玖 <body>
40 <div class=”container”> 41 <div class=”box一”> 4二<p>成分相对定位时,会全盘脱离文书档案流,并相对于其包涵块定位。相对定位的涵盖块,是其多年来的已牢固的先人成分。</p>
肆三 <img
src=””
alt=”A picture” style=”width:175px;height:十0px” /> 4四 <ul> 45<li>借使那个祖先成分是块级成分,包蕴块则为该祖先成分的内边距边界,即边框。</li>
四六<li>假若这些祖先成分是行内成分,包涵块则为该祖先成分的内容边界,即内容区。</li>
四柒<li>若是未有已稳固的先人元素,成分的盈盈块定义为始发包含块(一个视窗大小的矩形)。</li>
48 </ul> 4九 </div><!–关闭box1–> 50
</div><!–关闭container–> 5一 <div class=”container”>
5二 <div class=”box二”> 53<p>不管有未有曾经固定的祖辈成分,只要未有偏移量,相对定位之后,原地不动,脱离文档流。</p>
5四<p>上边这几个曾经相对定位的图像原地没动,然则曾经退出了文书档案流。</p>
55 <img
src=””
alt=”A picture” style=”width:175px;height:100px” /> 56
</div><!–关闭box2–> 57
</div><!–关闭container–> 58 <div class=”container”>
5玖 <div class=”box三”> 60
<p>未有已经固化的祖先成分,有偏移量,相对定位之后,以早先包括块(一个视窗大小的矩形)为原则进行偏移。</p>
陆1 <p>当偏移量为left:0;
buttom:0时,图像水平偏移到了起来包括块左下角(张开网页最起先的那多少个视窗的左下角)。</p>
62 <img
src=””
alt=”A picture” style=”width:175px;height:100px” /> 63
</div><!–关闭box3–> 64
</div><!–关闭container–> 6伍 <div class=”container
block”> 6陆 <div class=”box四”> 67<p>有壹度定位的上代成分,有偏移量,相对定位之后,以已经固定的祖宗成分为原则实行偏移。</p>
6八<p>此处已经固化的先人成分为这几个图像的容器div成分,偏移量为left:0;
bottom:0时,图像到了那么些容器的左下角(以边框为界)。</p> 6玖<img
src=””
alt=”A picture” style=”width:175px;height:100px” /> 70
</div><!–关闭box4–> 71
</div><!–关闭container–> 72 <div class=”container
block”> 73 <div class=”box伍”> 74<p>有已经定位的先世成分,有偏移量,相对定位之后,以已经固定的上代成分为原则实行偏移。</p>
75<p>此处已经固化的祖先元素为这几个图像的容器div成分,偏移量为left:-30px;
bottom:-50px时,图像到了那么些容器之外(以边框为界)。</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值进行精明显位,而且自适应性越来越好。

示例:

必发88 30 1
<!DOCTYPE html> 二 <html> 三 <head> 四 <meta
charset=”utf-八”> 5<title>用margin调节相对定位成分的职位</title> 六<style> 7 .box一,.box二,.box3 { 八 display: inline-block; 九margin-right: 150px; 10 border:1px solid blue; 1壹 } 1二 一叁 span { 1四background-color: red; 1伍 } 1陆 一七 .box二 span,.box3 span { 1捌 position:
absolute; 1九 } 20 二一 .meng { 2二 margin-left: -三em; 二三 } 贰四 二伍 .box肆 { 二陆border:1px solid red; 27 width: 500px; 2八 margin: 50px auto 0 auto; 2九padding:20px; 30 } 3一 3二 li { 33 margin-bottom: 20px; 3四 } 35</style> 36 </head> 三柒 <body> 3捌 <div
class=”box一”> 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” /> 5一 <span
class=”meng”>萌萌哒</span> 5二 </div> 5三 <div
class=”box四”> 5四 <ol> 55<li>第壹幅图,最初阶的规范。</li> 56<li>第壹幅图,七个标签相对定位,可是不钦点别的偏移量。</li>
五7 <li>第叁幅图,用margin负值调控“萌萌哒”的地方,完毕。</li>
5八 </ol> 5玖 </div> 60 </body> 六壹 </html> View Code

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

相对定位的成分,在不设置偏移量的时候,它即便完全脱离了文书档案流,但它还在原本的职责。

利用偏移属性实行精明确位,其具体地方是在乎相对定位元素的盈盈块,不一致的盈盈块将会有完全不等同的固定结果。

而采纳margin实行精显著位,不借助于于别的别的东西,特别可控。

在写那篇博文的时候,absolute让本身给relative带话,它说:“relative,你给小编滚好呢,笔者那辈子都不想看看你!”

预见后事如何,请移步relative篇,感激!

 

四、相对定位与欧洲经济共同体布局

何以用相对定位来对页面举办总体布局?

简单残忍,不学就浪费啊!!!

必发88 31 1
<!DOCTYPE html> 2 <html> 三 <head> 4 <meta
charset=”utf-八”> 伍 <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; 贰4 } 25 贰六 .header {
27 position: absolute; 2八 height: 50px; 2九 left: 0; 30 right: 0; 3一background-color: purple; 3贰 padding: 0 伍px; 3三 z-index: 一; 3四 } 35 36.header>h一 { 三七 line-height: 50px; 3捌 text-align: center; 3九 } 40 四一.aside { 4二 position: absolute; 四叁 top: 50px; 4肆 bottom: 50px; 四伍 left:
0; 四陆 width: 十0px; 四七 background-color: orange; 4捌 } 4九 50 .footer { 51position: absolute; 52 right: 0; 伍三 bottom: 0; 5肆 left: 0; 5伍 height:
50px; 56 background-color: purple; 伍7 } 58 5玖 .footer>h1 { 60
text-align: center; 六一 line-height: 50px; 6二 } 陆三 6四 .content { 65position: absolute; 6陆 top: 50px; 6七 right: 0; 6捌 bottom: 50px; 6玖 left:
100px; 70 background-color: cyan; 7一 overflow: auto; 72 } 7叁 7四 .content
h一 { 7伍 margin-top: 100px; 7六 margin-left: 50px; 7七 } 7八 79 .content li
{ 80 margin-left: 100px; 八一 margin-top: 80px; 8二 font-size: 2四px; 八三line-height: 一.5; 八肆 } 8五 捌陆 ol { 87 margin-bottom: 80px; 88 } 8九</style> 90 </head> 玖一 <body> 9二 <div
class=”page”> 九三 <div class=”header”> 94<h壹>Header</h一> 玖五 </div> 玖六 <div class=”aside”>
九七 <h一>Aside</h1> 玖捌 </div> 9玖 <div
class=”content”> 100 <h一>达成原理</h一> 拾壹 <ol> 102<li>创设贰个div.page,相对定位,铺满全屏。</li> 103<li>创设一个div.header,相对定位,设定中度。</li> 拾4<li>创设贰个div.aside,相对定位,设定宽度。</li> 十伍<li>创制三个div.footer,相对定位,设定中度。</li> 10六<li>创制二个div.content,绝对定位,依据左近div的宽高设定它的宽高;<br
/> 拾7以div.content成分替代原body元素,全体的页面内容都坐落这些中。</li>
十捌 </ol> 10玖 </div> 1十 <div class=”footer”> 11一<h一>Footer</h一> 11二 </div> 1一3 </div> 11肆</body> 1一伍 </html> View
Code

 

position:absolute浅析,absolute浅析
一、相对定位的特点 相对定位有所与转换一样的天性,即包裹性和破坏性。
就破坏性来讲,浮动仅仅破…

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>
必发88 ,         </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成分下的第3手子成分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();
         //每3个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…

打赏扶助本身写出越多好小说,谢谢!

任选一种支付办法

必发88 32
必发88 33

1 赞 收藏
评论

贰、内置对象document

  • Document 对象是 Window 对象的一部分,可因而 window.document
    属性对其张开访问

  • Document 对象使我们得以从剧本中对 HTML 页面中的全数因素进行访问:

document.head(获取尾部)
document.body(获取肉体)
document.title (获取标题)
document.documentElement(获取整个html)

  • Document.compatMode:
    BackCompat:标准格外情势关闭
  • 浏览器宽度:document.body.clientWidth

关于我:TGCode

必发88 34

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

必发88 35

CSS1Compat:标准卓越情势开启

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

  • BackCompat 对应 quirks mode(离奇形式) , CSS一Compat 对应 strict mode
    (严酷形式) :

早期的浏览器Netscape 肆和Explorer
4对css进行解析时,并没有遵守W3C标准,那时的分析方法就被大家称为quirks
mode(古怪格局),但随着W3C的正儿8经进一步首要,众多的浏览器初步依照W3C标准解析CSS,仿照W3C标准解析CSS的方式大家誉为strict
mode(严苛格局) 。

三、scroll家族

三.一 基本概念

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

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

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

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

  • 在实质上花费中行使相比多的正是scrollTop,如下图:

必发88 36

3.二 处理scroll家族浏览器适配难题

ie玖+ 和 最新浏览器

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: ‘一千00’, text: ‘襄阳银行总行’, children: [

{
id: ‘110000’,
text: ‘盐城分行’,
children: [
{
id: ‘113000’,
text: ‘济宁银行开拓区支行’,
leaf: true
},
{
id: ‘112000’,
text: ‘银川银行解放道支行’,
children: [
{
id: ‘112200’,
text: ‘德阳银行3大街支行’,
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;
}

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(){
    // 一. 兑现瀑布流布局
    waterFall(‘main’, ‘box’);
    // 二. 轮转加载盒子
    window.onscroll = function(){
    // 二.壹 推断是还是不是富有加载新盒子的规范
    if(check威尔LoadNewBox()){ // 加载新的盒子
    // 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);
    // 二. 求出当中三个盒子的增进率
    var boxWidth = allBox[0].offsetWidth;
    // 三. 求出显示器的宽度
    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 = [];
    // 壹.遍历全体的盒子
    for(var i=0; i<allBox.length; i++){
    // 一.一 得到具备盒子的高度
    var boxHeight = allBox[i].offsetHeight;
    // 壹.贰 把第一行盒子的可观放入数组
    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(){
    // 一. 到手最终三个盒子
    var allBox = $(‘main’).getElementsByClassName(‘box’);
    var lastBox = allBox[allBox.length – 1];
    // 二. 求出最终二个盒子中度的八分之四 + offsetTop
    var lastBoxDis = lastBox.offsetHeight \
    0.5 + lastBox.offsetTop;
    // 三. 求出显示屏的莫斯中国科学技术大学学
    var clientH = document.documentElement.clientHeight ||
    document.body.clientHeight;
    // 4. 求出滚动的可观
    var scrollTop = scroll().top;
    /console.log(lastBoxDis, clientH, scrollTop);\/
    // 伍. 论断再次来到
    return clientH + scrollTop >= lastBoxDis;
    }

MyFunc.js

/**

  • Created by Administrator on 2016/12/29.
    /
    /
    *
  • 获得滚动的尾部 和 右边 偏离地方
  • @returns {头部, 左边}
  • scroll().top scroll().left
    */
    function scroll(){
    if(window.pageXOffset != null){ // ie玖+ 和 最新浏览器
    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)

发表评论

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

网站地图xml地图