页面滚动加载数据(瀑布流)

页面滚动加载数据---霸气的名字--->瀑布流

http://blog.csdn.net/saindy5828/article/details/7756315

    1. <!DOCTYPE=html>  
    2. <html>  
    3. <head>  
    4. <script src="js/jquery.js" type="text/javascript"></script>  
    5.   
    6.    <script type="text/javascript">  
    7.     $(document).ready(function(){  
    8.         var range = 50;             //距下边界长度/单位px  
    9.         var elemt = 500;           //插入元素高度/单位px  
    10.         var maxnum = 20;            //设置加载最多次数  
    11.         var num = 1;  
    12.         var totalheight = 0;   
    13.         var main = $("#content");                     //主体元素  
    14.         $(window).scroll(function(){  
    15.             var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)  
    16.               
    17.             //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());  
    18.             //console.log("页面的文档高度 ："+$(document).height());  
    19.             //console.log('浏览器的高度：'+$(window).height());  
    20.               
    21.             totalheight = parseFloat($(window).height()) + parseFloat(srollPos);  
    22.             if(($(document).height()-range) <= totalheight  && num != maxnum) {  
    23.                 main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac"+(num%20)+(num%20)+";height:"+elemt+"' >hello world"+srollPos+"---"+num+"</div>");  
    24.                 num++;  
    25.             }  
    26.         });  
    27.     });  
    28.     </script>  
    29. </head>  
    30. <body>  
    31.     <div id="content" style="height:960px">  
    32.         <div id="follow">this is a scroll test;<br/>    页面下拉自动加载内容</div>  
    33.         <div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV</div>  
    34.           
    35.     </div>  
    36. </body>  
    37. </html> 

-----------------------------------------------------------------------------------------------

http://wdzhangxiang.iteye.com/blog/1615496

下拉滚动条或鼠标滚轮滚动到页面底部时， 动态即时加载新内容。
后台用 json 传输数据， 示例程序中只写了示例数组。数据也只设置了两个属性， 需根据实际应用改写。
页面用了 ul li 做为容器， 每个 li 表示一列
<ul id="stage">  
    <li></li>  
    <li></li>  
    <li></li>  
    <li></li>  
</ul>  
 
JS代码

$(document).ready(function(){  
    loadMore();  
});   
  
$(window).scroll(function(){  
    // 当滚动到最底部以上100像素时， 加载新内容  
    if ($(document).height() - $(this).scrollTop() - $(this).height()<100) loadMore();  
});  
  
  
function loadMore()  
{  
    $.ajax({  
        url : 'data.php',  
        dataType : 'json',  
        success : function(json)  
        {  
            if(typeof json == 'object')  
            {  
                var oProduct, $row, iHeight, iTempHeight;  
                for(var i=0, l=json.length; i<l; i++)  
                {  
                    oProduct = json[i];  
                      
                    // 找出当前高度最小的列, 新内容添加到该列  
                    iHeight = -1;  
                    $('#stage li').each(function(){  
                        iTempHeight = Number( $(this).height() );  
                        if(iHeight==-1 || iHeight>iTempHeight)  
                        {  
                            iHeight = iTempHeight;  
                            $row = $(this);  
                        }  
                    });  
                      
                      
                    $item = $('<div><img src="'+oProduct.image+'" border="0" ><br />'+oProduct.title+'</div>').hide();  
                      
                    $row.append($item);  
                    $item.fadeIn();  
                }  
            }  
        }  
    });  
}  
 
示例网址： http://product.1024i.com/ajax/waterfall/
资源下载： http://download.csdn.net/detail/iua1024/4216228

 

posted @ 2015-08-25 17:46  江湖丶丿新进程  阅读(117)  评论(0)    收藏  举报