無限下拉模仿效果圖：
瀑布流.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瀑布流
