唐山双龙配货站 / Js / _float瀑布流

0 0

   

_float瀑布流

2012-09-10  唐山双龙...
<!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

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。如发现有害或侵权内容,请点击这里 或 拨打24小时举报电话:4000070609 与我们联系。

    猜你喜欢

    0条评论

    发表

    请遵守用户 评论公约

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