js_float瀑布流
<!DOCTYPE HTML><html><head> <meta charset="utf-8" /> <title>demo</title> <style> *{margin:0;padding:0;} ul{list-style-type:none;width:150px;float:left;margin:15px;} ul li{height:200px;border:1px solid red;margin-top:10px;} #warp{width:750px;height:auto;border:1px solid #CCC;margin:20px auto;overflow:auto;position:relative;} </style></head><body><div id='warp'> <ul id='c1'> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> <li>ddddd</li> <li>ffff</li> <li>ggggg</li> <li>hhhh</li> <li>cccc</li> <li>cccc</li> <li>cccc</li> </ul> <ul id='c2'> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> <li>dddd</li> <li>eeee</li> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> <li>dddd</li> <li>eeee</li> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> <li>dddd</li> <li>eeee</li> </ul> <ul id='c3'> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> </ul> <ul id='c4'> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> </ul></div><script>window.onload=function(){ window.onscroll=function(){ var h=document.documentElement.clientHeight+document.documentElement.scrollTop; var oul=document.getElementById('warp').getElementsByTagName('ul') for(var i=0;i<oul.length;i++){ var oli=oul[i].getElementsByTagName('li'); if(posTop(oli[oli.length-1])<h){ console.log(h); //有待完善 } } } }function posTop(obj){ var top=0; while(obj){ top+=obj.offsetTop; obj=obj.offsetParent; } return top;}</script></body></html>TAG:
