無(wú)限下拉模仿效果圖：
瀑布流.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簡(jiǎn)單處理如下：
*{
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代碼主要處理在最短一列下面設(shè)置以及滾動(dòng)到最后一張圖片之前模仿預(yù)加載：
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");
}
}
}
//是否需要開(kāi)啟預(yù)加載 當(dāng)滑動(dòng)的距離+ 屏幕的高度 大于 最后一張圖片的上邊距的時(shí)候加載
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;
}
}
//取出父節(jié)點(diǎn)，對(duì)每個(gè)子節(jié)點(diǎn)做處理
function imageLocation(parent,content) {
//將parent下所有的內(nèi)容全部取出
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;
}
}
}
//數(shù)組包裹所有的box標(biāo)簽
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瀑布流
