瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部.。
实现瀑布流的核心方法是两个函数（详见代码JS代码和jQuery代码部分）
1、图片位置放置函数，该函数将下一张图片摆放在所有已加载图片的距离涌口顶部高度最小的那张图片的下方，主要通过以下几步完成：
1）根据窗口的大小和图片的宽度决定一排放置几张图片。
2）找到第一排的图片中高度最小的图片A，并将下一张图片B放在高度最小图片A的下方。
3）将第一排高度最小的图片的高度调整为图片A和图片B的高度的和。
4）重复步骤2）和步骤3）直到将所有已加载的图片放置完。
2、图片加载函数，该函数通过判断已加载图片是否显示到最底部来判断是否需要加载新的图片，主要通过以下几步完成：
1）找到当前一加载图片的最下方的图片，即最后加载的那张图片。
2）取得该图片距离窗口顶部得位置offsetTop。
3) 取得窗口的高度clientTop。
4) 取得鼠标滚动的距离scrollTop。
5）判断若offsetTop小于clientTop和scrollTop的和则返回表示加载图片的布尔值true。
动画效果：
源代码：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div class="box">
<div class="content">
<img src="images/1.jpg" alt="图片1">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/2.jpg" alt="图片2">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/3.jpg" alt="图片3">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/4.jpg" alt="图片4">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/5.jpg" alt="图片5">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/6.jpg" alt="图片6">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/7.jpg" alt="图片7">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/8.jpg" alt="图片8">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/1.jpg" alt="图片1">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/2.jpg" alt="图片2">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/3.jpg" alt="图片3">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/4.jpg" alt="图片4">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/5.jpg" alt="图片5">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/6.jpg" alt="图片6">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/7.jpg" alt="图片7">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/8.jpg" alt="图片8">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/1.jpg" alt="图片1">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/2.jpg" alt="图片2">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/3.jpg" alt="图片3">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/4.jpg" alt="图片4">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/5.jpg" alt="图片5">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/6.jpg" alt="图片6">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/7.jpg" alt="图片7">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/8.jpg" alt="图片8">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/1.jpg" alt="图片1">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/2.jpg" alt="图片2">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/3.jpg" alt="图片3">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/4.jpg" alt="图片4">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/5.jpg" alt="图片5">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/6.jpg" alt="图片6">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/7.jpg" alt="图片7">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/8.jpg" alt="图片8">
</div>
</div>
</div>
<!--<script type="text/javascript" src="script.js"></script>-->
<script type="text/javascript" src="script1.js"></script>
</body>
</html>css样式
*{
padding: 0;
margin: 0;
}
#container{
position: relative;
}
.box{
/*position: relative;*/
float: left;
}
.content{
padding: 10px;
box-shadow: 0 0 5px #ccc;
border: 1px solid #ccc;
border-radius: 5px ;
}
.content img{
width: 200px;
height: auto;
}js原生代码
window.onload=function(){
imgLocation("container","box");
var imgData={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]
}
window.onscroll=function(){
if (scrollSide()) {
var oParent=document.getElementById("container");
for (var i=0;i<imgData.data.length;i++){
var oBox=document.createElement("div");
oBox.className="box";
oParent.appendChild(oBox);
var oCotent=document.createElement("div");
oCotent.className="content";
oBox.appendChild(oCotent);
var img=document.createElement("img");
img.src="images/"+imgData.data[i].src;
oCotent.appendChild(img);
}
imgLocation("container","box");
}
}
}
//图片排版，第一排正常排放，第二排第一张图片放在第一排高度最小的那张图片下面，然后更新第一排高度最小的那张图片的高度为两张图片高度的和。
function imgLocation(parent,content) {
var oParent=document.getElementById(parent);
var aBoxes=getElementByClass(oParent,"box");
console.log(aBoxes[1].offsetLeft);
var imgWidth=aBoxes[0].offsetWidth;
var num=Math.floor(document.documentElement.clientWidth/imgWidth);
oParent.style.cssText="width:"+imgWidth*num+"px;margin:0 auto";
var aBoxesHeight=[];
//console.log(aBoxesHeight);
for (var i=0;i<aBoxes.length;i++) {
if (i < num) {
aBoxesHeight[i] = aBoxes[i].offsetHeight;
} else {
var minHeight=Math.min.apply(null,aBoxesHeight);
//console.log(minHeight);
var minIndex=aBoxesHeight.indexOf(minHeight);
aBoxes[i].style.position="absolute";
aBoxes[i].style.top=minHeight+"px";
aBoxes[i].style.left=aBoxes[minIndex].offsetLeft+"px";
aBoxesHeight[minIndex]=aBoxesHeight[minIndex]+aBoxes[i].offsetHeight;
}
}
//console.log( aBoxesHeight);
}
//通过判断已加载图片是否显示到最底部来判断是否需要加载新的图片
function scrollSide() {
var oParent=document.getElementById("container");
var aBoxes=getElementByClass(oParent,"box");
var lastTop=aBoxes[aBoxes.length-1].offsetTop;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
if (lastTop<scrollTop+pageHeight){
return true;
}
}
function getElementByClass(parent,className){
var arr=[];
var allcontents=parent.getElementsByTagName("*");
for (var i=0;i<allcontents.length;i++){
if (allcontents[i].className==className){
arr.push(allcontents[i]);
}
}
return arr;
}
jQuery代码
$(document).ready(function () {
$(window).on("load",function(){
imgLocation();
var dataIma={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"} ]};
window.onscroll=function(){
if (scrollside()){
$.each(dataIma.data,function (index,value) {
var box=$("<div>").addClass("box").appendTo($("#container"));
var content=$("<div>").addClass("content").appendTo(box);
$("<img>").attr("src","images/"+$(value).attr("src")).appendTo(content)
});
imgLocation();
}
}
})
});
//通过判断已加载图片是否显示到最底部来判断是否需要加载新的图片
function scrollside(){
var box=$(".box");
var lastboxHeight=box.last().get(0).offsetTop+Math.floor(box.last().height()/2);
var documentHeight=$(document).width();
var scrollHeight=$(window).scrollTop();
return( lastboxHeight<scrollHeight+documentHeight);
}
//图片排版，第一排正常排放，第二排第一张图片放在第一排高度最小的那张图片下面，然后更新第一排高度最小的那张图片的高度为两张图片高度的和。
function imgLocation(){
var box=$(".box");
var boxWidth=$(".box").width();
var num=Math.floor($(window).width()/boxWidth);
var boxArr=[];
$("#container").css({"width":num*box.width(),
//"margin":"10px auto"
});
box.each(function(index,value){
var boxHeight=box.eq(index).height();
if (index<num){
boxArr[index]=boxHeight;
}else{
var minboxHeight=Math.min.apply(null,boxArr);
//var minboxIndex=$.inArray(minboxHeight,boxArr);
var minboxIndex=boxArr.indexOf(minboxHeight);
$(value).css({
"position":"absolute",
"left": box.eq(minboxIndex).position().left,
"top": minboxHeight
});
boxArr[minboxIndex]+=$(".box").eq(index).height();
}
})
}