<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流
</title>
<style>
*{
margin:0;
padding: 0;
}
#myList{
width: 860px;
background: pink;
margin:0 auto;
overflow: hidden;
}
#myList li{
list-style:none;
width: 200px;
float:left;
margin-right: 20px;
}
#myList li:last-child{
margin-right: 0;
}
li img{
width: 100%;
}
#footer{
height: 50px;
background: red;
}
</style>
</head>
<body>
<ul id="myList">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="footer"></div>
<script>
var myList = document.getElementById('myList');
var lis = myList.getElementsByTagName('li');
var footer = document.getElementById('footer');
var arr = [];
var start = 0;
var end = 9;
for(var i=0;i<180;i++){
arr[i] = 'pblimg/img (' + (i+1) + ').jpg';
}
var imgLength = 0;
for(var i=0;i<180;i++){
var makeImg = new Image();
makeImg.src = arr[i];
makeImg.onload = function(){
imgLength++;
if(imgLength == 180){
waterfall();
}
}
}
function waterfall(){
var i = start * 20;
var maxi = i + 20;
for(i;i<maxi;i++){
var newImg = document.createElement('img');
newImg.src = arr[i];
var minLi = lis[0];
for(var j=0;j<lis.length;j++){
if(lis[j].offsetHeight < minLi.offsetHeight){
minLi = lis[j];
}
}
minLi.appendChild(newImg);
}
start++;
}
window.onscroll = function(e){
var e = e || window.event;
var h1 = document.documentElement.clientHeight;
var h2 = document.documentElement.scrollTop || document.body.scrollTop;
if(footer.offsetTop < h1+h2){
if(start == end){
return;
}
waterfall();
}
}
</script>
</body>
</html>
转载请注明原文地址: https://www.6miu.com/read-83107.html
