<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<title>带有分散效果的瀑布流</title>
<style type="text/css">
*{padding: 0;margin:0;}
#main{
position: relative;
}
.pin{
padding: 15px 0 0 15px;
float:left;
}
.box{
padding: 10px;
border:1px solid #ccc;
box-shadow: 0 0 6px #ccc;
border-radius: 5px;
}
.box img{
width:162px;
height:auto;
}
</style>
<script>
$( window ).on( "load", function(){
// 调用waterfall函数
waterfall();
var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
$(window).on("scroll",function(){
// 拖动滚动条时
if(checkscrollside){
$.each(dataInt.data,function(key,value){
var opin=$("<div>").addClass("pin").appendTo($("#main"));
var oBox=$("<div>").addClass("box").appendTo($(opin));
var oImg=$("<img>").attr("src","images/"+$(value).attr("src")).appendTo($(oBox));
});
waterfall();
}
})
});
function waterfall(){
// 计算及定位数据块显示分散效果
var $boxs=$("#main>div");
var w=$boxs.eq(0).outerWidth();
var cols=Math.floor($(window).width()/w);
$("#main").width(w*cols).css("margin","0 auto");
var hArr=[];
$boxs.each(function(index,element){
var h=$boxs.eq(index).outerHeight();
if(index<cols){
hArr[index]=h;
}else{
var minH=Math.min.apply(null,hArr);
var minHIndex=$.inArray(minH,hArr);
$(element).css({
"position":"absolute",
"top":minH+"px",
"left":minHIndex*w+"px"
})
hArr[minHIndex]+=$boxs.eq(index).outerHeight();
}
})
}
function checkscrollside(){
// 检测是否具备了加载数据块的条件
var $lastBox=$("#main>div").last();
var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
var scrollTop=$(window).scrollTop();
var documentH=$(window).height();
return (lastBoxDis<scrollTop+documentH)?true:false;
}
</script>
</head>
<body>
<div id="main">
<div class="pin">
<div class="box">
<img src="./images/1.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/2.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/3.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/5.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/6.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/7.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/8.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/9.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/10.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/11.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/12.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/13.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/14.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/15.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/16.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/17.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/18.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/19.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/20.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/21.jpg"/>
</div>
</div>
</div>
</body>
</html>
图片路径不对吧！我看你HTML里面的路径是./images，那么jQuery代码里面也应该要一样。var oImg=$("<img>").attr("src","./images/"+$(value).attr("src")).appendTo($(oBox)); 改改路径应该就好了
简单的说就是你的图片不够多，还没有溢出来，让滚动条显示。如果你开个f12控制台，你就可以直接滚动了。
你也可以改变列数，把
$("#main").width(w*cols).css("margin","0 auto");
var hArr=[];
$boxs.each(function(index,element){
var h=$boxs.eq(index).outerHeight();
if(index<cols){
这里2个cols改成4或者其他小一点的，只要出现滚动条就可以滚动了