<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="base.css" />
<script type="text/javascript" src="jquery-1.11.0.js" ></script>
<script>
$(function(){
var cols = $(".col");
$(window).scroll(function(){
//滚动条距顶部距离
var top = $(window).scrollTop();
//当前浏览器高度
var height = $(window).height();
//文档高度
var wHeight = $(document).height();
var flag = top + height == wHeight;
if(flag){
$.ajax({
type:"get",
url:"data.json",
async:true,
success:function(data){
addImg(data)
},
error:function(mes){
alert(1)
}
});
}
})
//给每一列增加图片
function addImg(arr) {
//console.log(arr);
for (var i = 0; i < arr.datas.length; i++) {
//alert(arr.datas.length);
var box = $('<div class = "box"></div>');
//$(box).addClass("box");
$(box).html('<img src="images/'+arr.datas[i]+'" />');
var col = getMinHeight(cols);
$(col).append(box);
}
}
/*
高度最小的列dom对象
*/
function getMinHeight(cols) {
//console.log(cols);
var min = cols[0]; //高度最小的列dom对象
for (var i = 0; i < cols.length; i++) {
if (min.offsetHeight > cols[i].offsetHeight) {
min = cols[i];
}
}
return min;
}
})
</script>
</head>
<body>
<div id="container">
<div class="col">
<div class="box">
<img src="images/0.jpg" />
</div>
<div class="box">
<img src="images/4.jpg" />
</div>
<div class="box">
<img src="images/5.jpg" />
</div>
</div>
<div class="col">
<div class="box">
<img src="images/1.jpg" />
</div>
<div class="box">
<img src="images/4.jpg" />
</div>
<div class="box">
<img src="images/6.jpg" />
</div>
</div>
<div class="col">
<div class="box">
<img src="images/2.jpg" />
</div>
<div class="box">
<img src="images/0.jpg" />
</div>
</div>
<div class="col">
<div class="box">
<img src="images/3.jpg" />
</div>
<div class="box">
<img src="images/8.jpg" />
</div>
<div class="box">
<img src="images/9.jpg" />
</div>
</div>
</div>
</body>
</html>
其中data.json是自己模拟的数据{"datas":["0.jpg","1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"]}
js瀑布流
最新推荐文章于 2023-03-19 19:23:07 发布