<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>瀑布流没有完成jq</title>
</head>
<style type="text/css">
*{margin:0; padding:0; margin:0 auto;}
#main{ position:relative;}
.box{ padding:15px 0 0 10px; float:left; display:inline; }
.pic { padding:10px; border:1px solid #ccc; border-radius:5px; box-shadow:0 0 2px #ccc; }
.pic img{ width:165px; height:auto;}
</style>
<body>
<div id='jz'>加载</div>
<div id="main">
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.baidu.com/img/baidu_jgylogo3.gif" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2276790136,2981566643&fm=58" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2413634062,3211494602&fm=96&s=E53876DA8E21791562B84C5A030040D7" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img02.taobaocdn.com/bao/uploaded/i2/TB1VhbGGXXXXXaxXpXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://static.17shihui.cn/17shihui/w1.1.50/image/weixin.png?static_version=2" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2276790136,2981566643&fm=58" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://ubmcmm.baidustatic.com/media/v1/0f000DH992eKAi22Lq-JVs.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=4282994204,2464365452&fm=96&s=29828C57C21E21CE1D3408290300E053" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://gd3.alicdn.com/bao/uploaded/i3/TB1QENsGpXXXXXDXXXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img3.shijue.cvidea.cn/tf/130530/2283083/52ae71293dfae9b500000005.JPEG" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.baidu.com/img/baidu_jgylogo3.gif" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2276790136,2981566643&fm=58" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2413634062,3211494602&fm=96&s=E53876DA8E21791562B84C5A030040D7" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img02.taobaocdn.com/bao/uploaded/i2/TB1VhbGGXXXXXaxXpXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://static.17shihui.cn/17shihui/w1.1.50/image/weixin.png?static_version=2" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2276790136,2981566643&fm=58" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://ubmcmm.baidustatic.com/media/v1/0f000DH992eKAi22Lq-JVs.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=4282994204,2464365452&fm=96&s=29828C57C21E21CE1D3408290300E053" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://gd3.alicdn.com/bao/uploaded/i3/TB1QENsGpXXXXXDXXXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img3.shijue.cvidea.cn/tf/130530/2283083/52ae71293dfae9b500000005.JPEG" />
</div>
</div>
</div>
</body>
</html>
<script src="js/jquery-1.11.1.min.js"></script>
<script language="JavaScript" type="text/javascript">
/*
1、页面加载时 执行 waterfall 方法；
2、写waterfall 方法，里面有两个参数 父Id 子CLSS名。
3、waterfall 里面的步骤：
获取里面的要传的ID ，获取这个ID下面的 所以要CLASS元素，此时要写 getByClass 方法
计算可以区， 显示多少列，： A ;一个CLASS 的宽度， B 可以区别的宽度， 父ID的总宽度： A*B
4' 下面是计算第一列中高度最小的那个元素，然后把要添加的那个元素添加到最小元素下面。 用FOR ， index 获取当前元素的index值方法
此时，页面显示排版正常了， 下面来是， 页面载时， 自动加载进来数据。
获取 数组中，最小的值
5、window.onscroll 绑定方法，
6、 checkScrollsilde 方法，用来计算当前最后一个元素的，高度，是否小于 滚动条的高度， 如果是， 则加载新数据。
*/
$(window).on("load",function(){
waterfall(); // 页面加载时， 执行此方法
$(window).on('scroll',function(){
if(checkScrollslide){
//遍历加载开始
var dataInt={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"}]};
$.each(dataInt.data,function(key,value){
console.log(value)
//alert( $(value).attr('src'))
var oDiv=$("<div>").addClass("box").appendTo($("#main"));
var oPic=$("<div>").addClass("pic").appendTo($(oDiv));
$("<img>").appendTo($(oPic)).attr('src','img/'+$(value).attr('src'))
})
waterfall(); // 遍历出来的元素重新加载样式，
}
})
})
/*
waterfall 方法：
1、 获取父元素下的 元素 box
2\ 计算一个元素的宽度。
3、让算可视区 显示几列
4、给父元素添加 总宽度 居中。
从第二列开始， 重新布局：
5、 遍历第一列中 最小的高度， 把从第二列中的第一个，放到第一列中最小的那个下面， 相对定位那。
*/
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');
/* 遍历子元素 index 索引 value 值;
1、计算一个元素的高度，
2、 如果是第一列的元素，而放到指定的数组中，
3、如果不是第一列的元素，则给加上样式。、
4、 加上的样式是： 高度，相对定位的属性，LEFT值 ，
5、 要加的高度的值：当前数组中的最小值 ， 因为这个数组中存的元素的高度，
5、LEFT: 当前元素的 宽度*当前元素的缩索值；
7、加完一个元素后， 数组中的高度重新重计算， 当前列的高度。重新放入数组中，
*/
var hArr=[];
$boxs.each(function(index,value){
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);// 最小值在数组中的索引
console.log(value); // dom 不能用JQ对像，
$(value).css({
'position':"absolute",
'top':minH+'px',
'left':minHindex*w+'px',
})
hArr[minHindex]+=$boxs.eq(index).outerHeight();
}
})
}
/*
checkScrollslide 函数 计算滚动条到底部时，此时要加载新的数据过来。
1、 获取元素的最后一个元素，
2、 计算最后的一个元素的高度， 和当前元素的高度的一半的 和。
3、滚动条的滚出去的高度，
4、 可视区的高度，
5、 return 下
*/
function checkScrollslide(){
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>
浙公网安备 33010602011771号