13930579202 / Js / _float瀑布流

分享

   

_float瀑布流

2012-09-10  139305792...
<!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>
复制代码
分类: Javascript

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多
    喜欢该文的人也喜欢 更多

    ×
    ×

    ¥.00

    微信或支付宝扫码支付:

    开通即同意《个图VIP服务协议》

    全部>>