<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流</title> <style> *{ margin: 0px; padding:0px; } .box{ position: relative; top:0px; } ul li{ list-style-type: none; position: absolute; padding:10px; width:300px; border:1px solid #ccc; -webkit-transition:all .7s ease-out .1s; -moz-transition:all .7s ease-out .1s; -o-transition:all .7s ease-out .1s; transition:all .7s ease-out .1s; opacity:0; } h1{ text-align: center; } h1 span{color: #ff0ff0;} </style> <script> document.getElementsByClassName=function(oparent,oclass){ try { return oparent.querySelectorAll("." + oclass); } catch (ex){ var reset = []; var reg = new RegExp("\\b" + oclass + "\\b"); var oCur = oparent.all; for (var i = 0; i < oCur.length; i++) { if (reg.test(oCur[i].className)) { reset.push(oCur[i]); } }; return reset; } } window.onresize=window.onload=function(){ var obox=document.getElementsByClassName(document,"box")[0]; margin=10; oli=obox.getElementsByTagName("li"); liWidth=oli[0].offsetWidth+margin; function show(){ var bodyWidth=document.body.offsetWidth; columnHeight=[]; /*olight=oli.length;*/ n=parseInt(bodyWidth/liWidth); columnNum=n==0?1:n; // console.log(columnNum) bodyLeft=bodyWidth>=liWidth?bodyWidth-columnNum*liWidth:0; obox.style.left=parseInt(bodyLeft/2)-(margin/2)+"px"; j=0; for (var i = 0; i < oli.length; i++) { if(i<columnNum){ columnHeight[i]=oli[i].offsetHeight+margin; oli[i].style.left=i*liWidth+"px"; oli[i].style.top=0; }else{ if(j>=columnHeight.length){ j=0; } var imgheight=oli[i].offsetHeight+margin; oli[i].style.top=columnHeight[j]+"px"; oli[i].style.left=j*liWidth+"px"; columnHeight[j]+=imgheight; j++; console.log(j+"J"+oli[i].offsetTop+"和"+ j*liWidth+"I"+i) } } } function runing(){ wscrillTop=document.documentElement.scrollTop||document.body.scrollTop; winH=document.documentElement.clientHeight; for (var i = 0; i < oli.length; i++) { var oliheight=oli[i].offsetHeight/3; scrolltop=(oli[i].getBoundingClientRect().top)+wscrillTop; if(scrolltop>=wscrillTop&&wscrillTop+winH>scrolltop+oliheight){ oli[i].style.opacity=1; } }; } show(); runing(); window.onscroll=function(){ runing(); } } </script> </head> <body> <h1>众森美女动漫大集合- <span>延迟加载+瀑布流</span>(缩小扩大窗口有惊喜哦-IE8以下。360浏览器暂时无效,请用chrome看效果。)</h1> <div class="box"> <ul> <li><img src="1.jpg" alt="111111"></li> <li><img src="2.jpg" alt="111111"></li> <li><img src="3.jpg" alt="111111"></li> <li><img src="4.jpg" alt="111111"></li> <li><img src="5.jpg" alt="111111"></li> <li><img src="6.jpg" alt="111111"></li> <li><img src="7.jpg" alt="111111"></li> <li><img src="8.jpg" alt="111111"></li> <li><img src="9.jpg" alt="111111"></li> <li><img src="10.jpg" alt="111111"></li> <li><img src="11.jpg" alt="111111"></li> <li><img src="12.jpg" alt="111111"></li> <li><img src="13.jpg" alt="111111"></li> <li><img src="14.jpg" alt="111111"></li> <li><img src="15.jpg" alt="111111"></li> <li><img src="1.jpg" alt="111111"></li> <li><img src="2.jpg" alt="111111"></li> <li><img src="3.jpg" alt="111111"></li> <li><img src="4.jpg" alt="111111"></li> <li><img src="5.jpg" alt="111111"></li> <li><img src="6.jpg" alt="111111"></li> <li><img src="7.jpg" alt="111111"></li> <li><img src="8.jpg" alt="111111"></li> <li><img src="9.jpg" alt="111111"></li> <li><img src="10.jpg" alt="111111"></li> <li><img src="11.jpg" alt="111111"></li> <li><img src="12.jpg" alt="111111"></li> <li><img src="13.jpg" alt="111111"></li> <li><img src="14.jpg" alt="111111"></li> <li><img src="15.jpg" alt="111111"></li> </ul> </div> </body> </html>
宽度固定 这样才能做瀑布流 再用绝对定位进行,第一排的top都等于0 首先用body 的宽度除以1个li的宽度 等到n列 在到第二列开始循环每行的top值 left值和第一排是一样 列数数更具body 的宽度变化而变化 不等于 最低等于1列 用数字保存对应列的li高度。延迟加载在上一篇写过,原理可以看看那边的 。不懂的可以加我QQ相互探讨:295989501
原文:http://blog.csdn.net/u011551941/article/details/38335497