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
原文地址：https://www.cnblogs.com/yangguoe/p/8203720.html
时间： 2024-08-03 06:35:43