无限下拉模仿效果图：
瀑布流.gif
Html的布局如下：大的div 包含一些盒子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link href="mycss.css" type="text/css" rel="stylesheet">
<script src="myjs.js" ></script>
</head>
<body>
<div id="container">
<div class="box">
<div class="box_img" >
</div>
</div>
<div class="box">
<div class="box_img">
</div>
</div>
CSS简单处理如下：
*{
margin: 0px;
padding: 0px;
}
#container{
position: relative;
}
.box{
padding: 5px;
float: left;
}
.box_img{
padding: 5px;
border: 1px solid #cccccc;
box-shadow: 0 0 5px #ccc;
border-radius: 5px;
}
.box_img img{
width: 150px;
height: auto;
}
JS代码主要处理在最短一列下面设置以及滚动到最后一张图片之前模仿预加载：
window.onload = function () {
imageLocation("container","box");
var imgData ={
"data":[
{
"src":"12.jpg"
},
{
"src":"13.jpg"
},
{
"src":"14.jpg"
},
{
"src":"15.jpg"
}
]
};
window.onscroll = function () {
if(checkFlag()){
var cpatrent =document.getElementById("container");
for (var i=0;i<imgData.data.length;i++){
var ccontent =document.createElement("div");
ccontent.className ="box";
cpatrent.appendChild(ccontent);
var boximage = document.createElement("div");
boximage.className ="box_img";
ccontent.appendChild(boximage);
var image= document.createElement("img");
image.src ="tupian/"+imgData.data[i].src;
boximage.appendChild(image);
}
imageLocation("container","box");
}
}
}
//是否需要开启预加载 当滑动的距离+ 屏幕的高度 大于 最后一张图片的上边距的时候加载
function checkFlag() {
var cpatrent =document.getElementById("container");
var ccontent = getChildElement(cpatrent,"box");
var lastContentHeight =ccontent[ccontent.length-1].offsetTop;
var scrollTop = document.documentElement.scrollTop ||document.body.scrollTop;
var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;
if(lastContentHeight <scrollTop +pageHeight){
return true;
}
}
//取出父节点，对每个子节点做处理
function imageLocation(parent,content) {
//将parent下所有的内容全部取出
var cparent = document.getElementById(parent);
var ccontent = getChildElement(cparent,content);
var imageWidth = ccontent[0].offsetWidth;
var number = Math.floor(document.documentElement.clientWidth / imageWidth);
cparent.style.cssText ="width:"+imageWidth *number+"px;margin:0px auto";
var BoxHeightA =[];
for(var i =0 ;i<ccontent.length;i++){
if(i<number){
BoxHeightA[i] = ccontent[i].offsetHeight;
// console.log(BoxHeightA[i]);
}else {
var minHeight =Math.min.apply(null,BoxHeightA);
var minIndex = getminHeightLocation(BoxHeightA,minHeight);
ccontent[i].style.position = "absolute";
ccontent[i].style.top = minHeight +"px";
ccontent[i].style.left = ccontent[minIndex].offsetLeft +"px";
BoxHeightA[minIndex] = BoxHeightA[minIndex]+ccontent[i].offsetHeight;
}
}
}
function getminHeightLocation(BoxHeightA,minHeight) {
for(var i in BoxHeightA){
if (BoxHeightA[i] == minHeight){
return i;
}
}
}
//数组包裹所有的box标签
function getChildElement(parent,content) {
var contentA = [];
var allcontent = parent.getElementsByTagName("*");
for(var i= 0;i<allcontent.length;i++){
if (allcontent[i].className == content){
contentA.push(allcontent[i]);
}
}
return contentA;
}
demo地址：HTML瀑布流
