瀑布流布局多用于加载图片，或者图片配上文字。视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动，还会不断加载数据块并附加至当前尾部。本文就来利用jQuery实现一个图片瀑布流的效果。
1.布局。
首先我们创建一个项目，导入jquery.js，以及十张图片。图片大小可以不一致。
先放入一个容器div（container）。然后创建一个div（box）用来承载图片及其他边缘效果，比如文字介绍等。在这个div里面再指定一个div（content）用来承载图片。
代码如下：
<div id="container">
<div class="box">
<div class="content">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/2.jpg">
</div>
</div>
...
<div class="box">
<div class="content">
<img src="img/9.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/0.jpg">
</div>
</div>
</div>
这时候图片是依次向下排列的，我们来加一个样式。首先通配符设置margin和padding都是0。然后box设置相对定位和向左浮动，这样图片就一张张挨在一起了。为了好看我们再给content加上一个边框。img固定一个宽度，高度设为auto。代码：
* {
margin:;
padding:;
}
.box {
position: relative;
float: left;
}
.content {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.content img {
width: 200px;
height: auto;
}
为了效果明显，我们将图片div多复制几个。至此布局基本上完成了，我们可以看到此时大致的样式出来了，但是图片上下排列还不够紧密。下面要修改图片的位置摆放。
2.图片位置摆放
根据瀑布流效果可以看出，第二排的第一张图片应该放在第一排最短的一张图片下面，之后也是依次按照这个规则摆放。下面我们用jQuery实现：
$(document).ready(function(){//加载文档
$(window).on("load",function(){//监听window的加载事件
imgLocation();
});
});
function imgLocation(){//确定图片加载的位置
var box = $(".box");//创建盒子对象
var boxWidth = box.eq(0).width();//获取盒子宽度
var num = Math.floor($(window).width()/boxWidth);//计算一排可以摆放几个
var boxArr = [];//获取这一排盒子的高度，好找到最短的一个
box.each(function(index,value){//each遍历
//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);//获取最小高度图片的位置
$(value).css({
"position":"absolute",
"top":minboxHeight,
"left":box.eq(minboxIndex).position().left
});//下一张图片摆放在最短图片的下面
boxArr[minboxIndex]+=box.eq(index).height();//重新计算最短图片的高度
}
});
}
此时已经实现了瀑布流的效果。
3.滚动加载实现
首先要监听鼠标滚动事件。当最后一张图片滚动到一半的时候，创建对象，加载图片。
代码如下：
$(document).ready(function(){//加载文档
$(window).on("load",function(){//监听window的加载事件
imgLocation();
var dataImg = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"}]}
window.onscroll = function(){
if(scrollside()){
$.each(dataImg.data,function(index,value){
//jQuery动态创建div和img
var box = $("<div>").addClass("box").appendTo($("#container"));//创建一个div，添加class，加载到容器中
var content = $("<div>").addClass("content").appendTo(box);//创建内容div加载到box中
$("<img>").attr("src","./img/"+$(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).height();//当前容器的高度
var scrollHeight = $(window).scrollTop();//鼠标滚动的高度
return (lastboxHeight<scrollHeight+documentHeight)?true:false;
}
4.bug修复。
上面的代码在窗口大小不断变化时会出现bug，列数不随窗口大小改变。修复这个bug我们可以在window的加载事件监听的地方加上一个监听窗口大小变化的函数，当窗口大小改变时调用一遍布局函数imgLocation();
这样窗口拉小已经可以跟着改变，但是重新拉大列数不会跟着增加，而是叠加在已有列上。这是因为拉大以后余出的空间没有box，获取到的box的left是原有列的，所以新图片会叠加在前面的列上。所以我们在if(index<num)时重新赋一遍位置。
如下黄色底色部分就是修改的代码。 最终js代码如下：
$(document).ready(function() { //加载文档
$(window).on("load", function() { //监听window的加载事件
imgLocation();
var dataImg = { "data": [{ "src": "0.jpg" }, { "src": "9.jpg" }, { "src": "3.jpg" }, { "src": "4.jpg" }, { "src": "5.jpg" }, { "src": "6.jpg" }, { "src": "7.jpg" }] }
/*鼠标滚动时：*/
window.onscroll = function() {
if (scrollside()) {
$.each(dataImg.data, function(index, value) {
//jQuery动态创建div和img
var box = $("<div>").addClass("box").appendTo($("#container")); //创建一个div，添加class，加载到容器中
var content = $("<div>").addClass("content").appendTo(box); //创建内容div加载到box中
$("<img>").attr("src", "./img/" + $(value).attr("src")).appendTo(content); //创建图片加载到内容中
imgLocation(); //新加入的图片遵循瀑布流布局的规则
});
}
}
/*窗口大小变化时：*/
window.onresize = function() {
imgLocation();
}
});
});
/*动态加载*/
function scrollside() {
var box = $(".box");
var lastboxHeight = box.last().get(0).offsetTop + Math.floor(box.last().height() / 2); //最后一张图片距离顶端的距离加上最后一张图片高度的一半
var documentHeight = $(document).height(); //当前容器的高度
var scrollHeight = $(window).scrollTop(); //鼠标滚动的高度
return (lastboxHeight < scrollHeight + documentHeight) ? true : false;
}
/*瀑布流布局实现*/
function imgLocation() { //确定图片加载的位置
var box = $(".box"); //创建盒子对象
var boxWidth = box.eq(0).width(); //获取盒子宽度
var num = Math.floor($(window).width() / boxWidth); //计算一排可以摆放几个
var boxArr = []; //获取这一排盒子的高度，好找到最短的一个
box.each(function(index, value) { //each遍历
//index是图片位置，value是相对应的元素。
var boxHeight = box.eq(index).height();
if (index < num) {
boxArr[index] = boxHeight;
/*重新设置第一行的元素位置，避免窗口由小拉大时出错：*/
$(value).css({
"position": "absolute",
"top": 0,
"left": boxWidth * index
});
} else {
var minboxHeight = Math.min.apply(null, boxArr); //获取最小高度
//console.log(minboxHeight);
var minboxIndex = $.inArray(minboxHeight, boxArr); //获取最小高度图片的位置
// console.log("minboxIndex:"+minboxIndex);
$(value).css({
"position": "absolute",
"top": minboxHeight,
"left": box.eq(minboxIndex).position().left
}); //下一张图片摆放在最短图片的下面
boxArr[minboxIndex] += box.eq(index).height(); //重新计算最短图片的高度
}
});
}
以上。