<!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>