瀑布流例子

<!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;  //获取li的长度
    var iPage = 1;//定义这是第几页,初始为1
    var b = true;//保证拉动滚动条一次只加载一页数据的开关
    
    
    getList();//获取数据
    
    function getList() {//获取数据的函数
        ajax('get','getPics.php','cpage=' + iPage,function(data) {  //date里包含json的信息
        
            var data = JSON.parse(data);  //把json的数据转为js对象的格式
            
            if ( !data.length ) {
                
                return ;//后续没有数据了,退出下面不执行
            }
            
            for ( var i=0; i<data.length; i++ ) {  //遍历json的数据                
                
                var _index = getShort();//获取高度最短的li
                
                var oDiv = document.createElement('div');  //创建div
                var oImg = document.createElement('img');  //创建商品图片
                oImg.src = data[i].preview;  //图片的地址
                oImg.style.width = '225px';//图片的宽度设为固定,防止图片没有加载而for执行了导致计算最短的li产生误差
                oImg.style.height =  data[i].height * ( 225 / data[i].width ) + 'px';
                //图片的高度=图片的实际高度*根据宽度缩小的比例
                oDiv.appendChild( oImg );//把图片添加到div里
                var oP = document.createElement('p');  //创建商品描述
                oP.innerHTML = data[i].title;//商品描述信息的html为json里的题目
                oDiv.appendChild( oP );//把描述信息添加到div里
                
                aLi[_index].appendChild( oDiv );//把div添加到最短的li里
                
            }
            
            b = true;//执行完又可以加载了
            
        });
    }
    
    window.onscroll = function() {//当滚动条发生滚动的时候执行的函数,如果最短的li进入可视区,就开始加载新的数据
        
        var _index = getShort();//最短的li的索引值
        var oLi = aLi[_index];//最短的li
        
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //获取滚动条滚动的距离,兼容性处理方式,谷歌是body
        
        if ( getTop( oLi ) + oLi.offsetHeight < document.documentElement.clientHeight + scrollTop ) {
            //如果最短的li到页面顶部的距离+最短的li的高度<浏览器可视区的高度+滚动条滚动的高度。就说明需要加载数据了
            if ( b ) {//如果true说明没有在加载数据,就可以加载
                b = false;//不能加载了
                iPage++;//满足条件页数增加
                getList();//获取数据
            }
            
        }
        
    }
    
    function getShort() { //获取最短的li的函数
        var index = 0;  //设置索引,表示li中的第几个。初始是第一个li
        var ih = aLi[index].offsetHeight;  //这个索引值下的li的高度,ih初始为第一个li的高度
        for (var i=1; i<iLen; i++) { //从第二个li开始比较
            if ( aLi[i].offsetHeight < ih ) {  //如果第n个的li的高度小于之前存储的最小的高度
                index = i;  //索引值改为现在的li的索引值
                ih = aLi[i].offsetHeight;  //高度为现在的li的高度
            }
        }
        return index;  //返回高度最小的li的索引值
    }
    
    function getTop(obj) {//获取元素到页面顶部的绝对值
        var iTop = 0;//初始值为0
        while(obj) {//如果元素存在
            iTop += obj.offsetTop;  //高度=现在的top+当前元素到父元素的top值
            obj = obj.offsetParent;  //元素=当前元素的父元素,直到没有父元素,就是到页面最顶部的top值
        }
        return iTop;  //返回top的高度值
    }
    
}
</script>
</head>

<body>
    <ul id="ul1">
        <li></li><!--一共为4列,每个li里有很多个div,往最短的li里加div-->
          <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

 

posted @ 2017-04-18 17:24  念念念不忘  阅读(205)  评论(0)    收藏  举报