html代码：

1   2   3   4     
       5     
       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             
      
 46             
      
        47                 
       
         48                     
         49                 
       
 50             
      
 51             
      
        52                 
       
         53                     
         54                 
       
 55             
      
 56             
      
        57                 
       
         58                     
         59                 
       
 60             
      
 61             
      
        62                 
       
         63                     
         64                 
       
 65             
      
 66             
      
        67                 
       
         68                     
         69                 
       
 70             
      
 71             
      
        72                 
       
         73                     
         74                 
       
 75             
      
 76             
      
        77                 
       
         78                     
         79                 
       
 80             
      
 81             
      
        82                 
       
         83                     
         84                 
       
 85             
      
 86             
      
        87                 
       
         88                     
         89                 
       
 90             
      
 91             
      
        92                 
       
         93                     
         94                 
       
 95             
      
 96             
      
        97                 
       
         98                     
         99                 
       
100             
      
101             
      
       102                 
       
        103                     
        104                 
       
105             
      
106             
      
       107                 
       
        108                     
        109                 
       
110             
      
111             
      
       112                 
       
        113                     
        114                 
       
115             
      
116         
     
117 118 119 120 

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.οnscrοll=function(){                //满足条件的时候进行加载图片；                if(scrollside()){//如果满足滚动条件，则将图片拼接到页面中；                    $.each(dataImg.data,function(index,value){                      var box=$("
     
      ").addClass("box").appendTo($("#container"));                      var content=$("
      
       ").addClass('content').appendTo(box);                        // console.log($(value).attr('src'));                        $('
       ').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
      
     

知识点总结：

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); // => 410 11 var B = {12   a: 413 }14 15 A.add.apply(B,[3]);  // => 7， add函数中的this 换成了B