码迷,mamicode.com
首页 > 其他好文 > 详细

瀑布流

时间:2015-11-20 01:34:05      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body {margin: 0;}
#ul1 {width: 1080px; margin: 100px auto 0;}
li { width: 247px; list-style: none; float: left; margin-right: 10px; }
li div {border: 1px solid #000; padding: 10px; margin-bottom: 10px;}
li div img { width: 225px; display: block;}
</style>
<script src="ajax.js"></script>
<script>
window.onload = function() {
    
    var oUl = document.getElementById(ul1);
    var aLi = oUl.getElementsByTagName(li);
    var iLen = aLi.length;
    var iPage = 1;
    var b = true;
    
    //初始化数据处理
    getList();
    
    function getList() {
        ajax(get,getPics.php,cpage= + iPage,function(data) {
        
            var data = JSON.parse(data);
            
            if ( !data.length ) {
                //后续没有数据了
                return ;
            }
            
            for ( var i=0; i<data.length; i++ ) {
                
                //获取高度最短的li
                var _index = getShort();
                
                var oDiv = document.createElement(div);
                var oImg = document.createElement(img);
                oImg.src = data[i].preview;
                oImg.style.width = 225px;
                oImg.style.height =  data[i].height * ( 225 / data[i].width ) + px;
                oDiv.appendChild( oImg );
                var oP = document.createElement(p);
                oP.innerHTML = data[i].title;
                oDiv.appendChild( oP );
                
                aLi[_index].appendChild( oDiv );
                
            }
            
            b = true;
            
        });
    }
    
    window.onscroll = function() {
        
        var _index = getShort();
        var oLi = aLi[_index];
        
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        
        if ( getTop( oLi ) + oLi.offsetHeight < document.documentElement.clientHeight + scrollTop ) {
            
            if ( b ) {
                b = false;
                iPage++;
                getList();
            }
            
        }
        
    }
    
    function getShort() {
        var index = 0;
        var ih = aLi[index].offsetHeight;
        for (var i=1; i<iLen; i++) {
            if ( aLi[i].offsetHeight < ih ) {
                index = i;
                ih = aLi[i].offsetHeight;
            }
        }
        return index;
    }
    
    function getTop(obj) {
        var iTop = 0;
        while(obj) {
            iTop += obj.offsetTop;
            obj = obj.offsetParent;
        }
        return iTop;
    }
    
}
</script>
</head>

<body>
    <ul id="ul1">
        <li></li>
          <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

 

瀑布流

标签:

原文地址:http://www.cnblogs.com/thinkpad/p/4979473.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!