瀑布流案例

html代码：

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9     <link rel="stylesheet" href="river.css">
 10     <script src="jquery-1.9.1.min.js"></script>
 11     <script src="app.js"></script>
 12 
 13 </head>
 14 <body>
 15         <div class="container">
 16             <div class="box">
 17                 <div class="content">
 18                     <img src="1.jpg" alt="">
 19                 </div>
 20             </div>
 21             <div class="box">
 22                 <div class="content">
 23                     <img src="2.jpg" alt="">
 24                 </div>
 25             </div>
 26             <div class="box">
 27                 <div class="content">
 28                     <img src="3.jpg" alt="">
 29                 </div>
 30             </div>
 31             <div class="box">
 32                 <div class="content">
 33                     <img src="1.jpg" alt="">
 34                 </div>
 35             </div>
 36             <div class="box">
 37                 <div class="content">
 38                     <img src="4.jpg" alt="">
 39                 </div>
 40             </div>
 41             <div class="box">
 42                 <div class="content">
 43                     <img src="5.jpg" alt="">
 44                 </div>
 45             </div>
 46             <div class="box">
 47                 <div class="content">
 48                     <img src="6.jpg" alt="">
 49                 </div>
 50             </div>
 51             <div class="box">
 52                 <div class="content">
 53                     <img src="7.jpg" alt="">
 54                 </div>
 55             </div>
 56             <div class="box">
 57                 <div class="content">
 58                     <img src="8.jpg" alt="">
 59                 </div>
 60             </div>
 61             <div class="box">
 62                 <div class="content">
 63                     <img src="9.jpg" alt="">
 64                 </div>
 65             </div>
 66             <div class="box">
 67                 <div class="content">
 68                     <img src="1.jpg" alt="">
 69                 </div>
 70             </div>
 71             <div class="box">
 72                 <div class="content">
 73                     <img src="2.jpg" alt="">
 74                 </div>
 75             </div>
 76             <div class="box">
 77                 <div class="content">
 78                     <img src="3.jpg" alt="">
 79                 </div>
 80             </div>
 81             <div class="box">
 82                 <div class="content">
 83                     <img src="1.jpg" alt="">
 84                 </div>
 85             </div>
 86             <div class="box">
 87                 <div class="content">
 88                     <img src="4.jpg" alt="">
 89                 </div>
 90             </div>
 91             <div class="box">
 92                 <div class="content">
 93                     <img src="5.jpg" alt="">
 94                 </div>
 95             </div>
 96             <div class="box">
 97                 <div class="content">
 98                     <img src="6.jpg" alt="">
 99                 </div>
100             </div>
101             <div class="box">
102                 <div class="content">
103                     <img src="7.jpg" alt="">
104                 </div>
105             </div>
106             <div class="box">
107                 <div class="content">
108                     <img src="8.jpg" alt="">
109                 </div>
110             </div>
111             <div class="box">
112                 <div class="content">
113                     <img src="9.jpg" alt="">
114                 </div>
115             </div>
116         </div>
117 </body>
118 </html>
119 <script src="jquery-1.9.1.min.js"></script>
120 <script src="app.js"></script>

css代码：

 1 img{
 2     width: 100%;
 3     height: auto;
 4 }
 5 .container{
 6     margin: 0 auto;
 7 }
 8 .box{
 9     float: left;
10     position: relative;
11 }
12 .content{
13     width: 190px;
14     height: auto;
15     padding: 5px;
16     border:2px solid #888;
17     float: left;
18     position: relative;
19 }

js代码：

$(function(){
    $(window).on('load',function(){
        imgLocation();
        //模拟图片数据传输,当页面滚动的时候获得该json数据
        var dataImg={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'}]};
        window.onscroll=function(){
                //满足条件的时候进行加载图片；
                if(scrollside()){//如果满足滚动条件，则将图片拼接到页面中；
                    $.each(dataImg.data,function(index,value){
                      var box=$("<div>").addClass("box").appendTo($("#container"));
                      var content=$("<div>").addClass('content').appendTo(box);
                        // console.log($(value).attr('src'));
                        $('<img>').attr('src',$(value).attr('src')).appendTo(content)
                    });
                        imgLocation();//加载完图片后调用图片的位置；
                }
            };
    });
});
function scrollside(){
    var box=$('.box');
    var lastboxHeight=box.last().get(0).offsetTop+Math.floor(box.last().height()/2);//获得最后一个盒子的一半距离页面顶部的距离；
    var documentHeight=$(document).width();//页面的高度
    var scrollHeight=$(window).scrollTop();//滚动的高度
    // 当最后一张图片的高度大于滚动的高度+页面的高度。则允许滚动；否则不滚动
    // console.log(scrollHeight);
    // console.log(documentHeight);
    return  ( lastboxHeight < scrollHeight + documentHeight ) ? true : false;
}
function imgLocation(){//图片位置函数
    var box=$('.box');
    var boxWidth=box.eq(0).width();//获得第一张图片的宽度；其实所有的图片的宽度都是一样的；
    var num=Math.floor($(window).width()/boxWidth);//得到的是每一行显示几张图片
    // console.log(num);//
    var boxArr=[];//创建一个数组，里面来装第一行图片的高；
    box.each(function(index,value){
        // console.log(index+'--'+value);得到的是第一个元素
        var boxHeight=box.eq(index).height();//得到所有图片的高度；
        if(index<num){//得出的是第一行的图片
            boxArr[index]=boxHeight;//将第一行图片的高放入数组中；
            // console.log(boxHeight);//5584值不对
        } else{
            var minboxHeight=Math.min.apply(null,boxArr);//获得最小值
            // console.log(minboxHeight);//3131;
            var minboxIndex=$.inArray(minboxHeight,boxArr);
            $(value).css({//遍历图片
                'position':'absolute',
                'top':minboxHeight,
                'left':box.eq(minboxIndex).position().left
            });
            boxArr[minboxIndex]+=box.eq(index).height()
        }
    });
}

知识点总结：

1.$.inArray() 函数用于在数组中查找指定值，并返回它的索引值（如果没有找到，则返回-1）；

2.apply() 的作用是改变执行的执行环境。

就是说数组 colH 没有min这个方法，但是Math对象可以求最小值，有min这个方法

例如 var a = Math.min(3,2,1,4)，那么a将赋值为1

colH想使用Math对象的min方法，就需要使用call/apply来改变执行环境了。

Math.min(3,2,1,4)等价于 Math.min.apply(null, [3,2,1,4])，null是上下文，传入的对象对应函数中的this，min函数并没有使用this，因此这里可以为null，[3,2,1,4]是给min函数的参数列表。

 1 var A = { 
 2   a: 1
 3 }
 4 
 5 A.add = function( b ){
 6   console.log(this.a + b);  // 这里的this是A
 7 }
 8 
 9 A.add(3); // => 4
10 
11 var B = {
12   a: 4
13 }
14 
15 A.add.apply(B,[3]);  // => 7， add函数中的this 换成了B

 

posted @ 2018-01-05 12:32  前端极客  阅读(685)  评论(0)  编辑  收藏  举报