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 100%; 3 height: auto; 4 } 5 .container{ 6 margin: 0 auto; 7 } 8 .box{ 9 float: left; 10 position: relative; 11 } 12 .content{ 13 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