jQuery实现瀑布流js分析：首先监听window事件获取图片加载的位置，调用图片加载位置的函数，然后以鼠标滑动的距离来加载图片
1.HTML布局：
1 <div id="container"> 2 ????????????<div class="box"> 3 ????????????????<div class="content"> 4 ????????????????????<img src="../img/1.jpg"> ?5 ????????????????</div> 6 ????????????</div> 7 ????????????<div class="box"> 8 ????????????????<div class="content"> 9 ????????????????????<img src="../img/9.jpg"> 10 ????????????????</div>11 ????????????</div>12 ????????????<div class="box">13 ????????????????<div class="content">14 ????????????????????<img src="../img/11.jpg"> 15 ????????????????</div>16 ????????????</div>17 ????????????<div class="box">18 ????????????????<div class="content">19 ????????????????????<img src="../img/12.jpg"> 20 ????????????????</div>21 ????????????</div>22 <-- class为box可以多复制几个-->23 ????????????????????????</div>
2.css样式：
1 <style>2 ????????????*{padding:0;margin:0;}3 ????????????.box{position:relative;float:left;/*position:absolute*/}4 ????????????.content{padding:10px;border:1px solid #ccc;box-shadow: 0 0 ?5px #ccc;5 ????????????border-radius: 5px;}6 ????????????img{width:190px;height:auto;}7 ????????</style>3.js代码（注释写的有点乱）
<script> ???????????$(function(){ ???????????????//监听window事件来获取图片加载的位置 ???????????????$(window).on("load",function(){ ???????????????????imgLoction(); ???????????????????var dataInt={‘data‘:[{‘src‘:‘1.jpg‘},{‘src‘:‘2.jpg‘},{‘src‘:‘3.jpg‘},{‘src‘:‘4.jpg‘}]}; ???????????window.onscroll=function(){ ???????????????????if(checkscrollside()){ ???????????????????????$.each( dataInt.data, function( index, value ){ ???????????????????????????var $oPin = $(‘<div>‘).addClass(‘box‘).appendTo( $( "#container" ) ); ???????????????????????????var $oBox = $(‘<div>‘).addClass(‘content‘).appendTo( $oPin ); ???????????????????????????$(‘<img>‘).attr(‘src‘,‘./img/‘ + $( value).attr( ‘src‘) ).appendTo($oBox); ???????????????????????}); ???????????????????????imgLoction(); ???????????????????}; ???????????????} ???????????????????????????????????}) ???????????}) ???????????function checkscrollside(){ ???????????????var $aPin = $( ".box" ); ???????????????var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height()/2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载) ???????????????var scrollTop = $( window ).scrollTop()//注意解决兼容性 ???????????????var documentH = $( document ).width();//页面高度 ???????????????return (lastPinH < scrollTop + documentH ) ? true : false;//到达指定高度后 返回true，触发waterfall()函数 ???????????} ???????????????????????????????????????????????????????????function imgLoction(){ ???????????????//首先创建一个盒子对象，对应的就是index文件当中的box元素 ???????????????var box=$(".box"); ???????????????//获取盒子的宽度==第一个盒子的宽度 ???????????????var boxwidth=box.eq(0).width(); ???????????????//获取盒子宽度后看一排能摆放多少个 ???????????????//一排的个数等于当前浏览器窗口的宽度除以每个盒子的宽度,注意除以得到的数是小数，要将其转化为整数 ???????????????var num=Math.floor($(window).width()/boxwidth); ???????????????//定义一个数组来承载储存列中所有盒子的高度,然后获取一排盒子中高度最小的那个 ???????????????var boxArr=[]; ???????????????//遍历box之后获取每个盒子的高度 ???????????????box.each(function(index,value){//这里的value是盒子对象 ???????????????????//console.log(index); ???????????????????//创建一个盒子的高度,用来获取每个盒子的高度 ???????????????????var boxheight=box.eq(index).height(); ???????????????????//然后 判断：储存第一排中每一个图片的高度，放在数组中储存它 ???????????????????if(index<num){ ???????????????????????boxArr[index]=boxheight; ???????????????????????//console.log(boxheight); ???????????????????}else{ ???????????????????????//获取到高度之后，第二排开始摆放，首先获取到图片最小的一个高度 ???????????????????????var minboxheight=Math.min.apply(null,boxArr); ???????????????????????//console.log(minboxheight); ???????????????????????//设置图片的位置，获取第一排中最小图片存放的位置 ???????????????????????var boxminindex=$.inArray(minboxheight,boxArr); ???????????????????????//console.log(boxminindex); ???????????????????????//接下来通过位置进行摆放 ???????????????????????//console.log(value); ???????????????????????//获取对象 ???????????????????????$(value).css({ ???????????????????????????"position":"absolute", ???????????????????????????"top":minboxheight, ???????????????????????????"left":box.eq(boxminindex).position().left ???????????????????????}) ???????????????????????//然后还要记一个图片摆放的高度 ???????????????????????boxArr[boxminindex]+=box.eq(index).height(); ???????????????????} ???????????????}) ???????????????????????????} ???????</script>jQuery实现瀑布流
原文地址：http://www.cnblogs.com/karry990921/p/7489408.html