一、展示页面

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无忧移动-测试</title>
    <script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <style type="text/css">
        img{border:0;}
        a{cursor:pointer;color:#014ccc;text-decoration:underline;}
        a:hover{text-decoration:none;}
        .clear{clear:both;height:0px;overflow:hidden;}
        .img_list{margin:0 auto;}
        .img_list li{list-style:none}
        .img_list .items{width:300px;margin:0 auto;}
        .img_list .item{float:left;margin-bottom:5px;font-size:14px;}
        .img_list .item .order{display:inline-block;*display:inline;*zoom:1;width:28px;color:#f30;}
        .img_list .item .i_thumb{width:300px;height:280px;}
        .img_list .item .i_title{width:100%;height:20px;}
        .showmore{height:35px;background:#f8f8f8;border-bottom:1px solid #cccccc;cursor:pointer;tetx-align:center;margin-bottom:25px;}
        .showmore .handle{display:block;height:35px;text-align:center;color:#909090;font-size:14px;text-decoration:none;line-height:35px;}
        .showmore .handle:hover{text-decoration:none;background:#e6e6e6;}
    </style>
</head>
<body>
    <center>
        <h1>
            图片动态加载示例</h1>
    </center>
    <div class="img_list" id="img_list">
        <div class="items" id="items">
            <ul class="item">
                <li class="i_thumb"><a href="#" target="_blank" title="图片一">
                    <img src="/Themes/Default/Images/images_test/1.jpg" alt="图片一" /></a></li>
                <li class="i_title"><span class="order">1</span><a href="#"
                    target="_blank" title="图片一">图片一</a></li>
            </ul>
            <ul class="item">
                <li class="i_thumb"><a href="#" target="_blank" title="图片二">
                    <img src="/Themes/Default/Images/images_test/2.jpg" alt="图片二" /></a></li>
                <li class="i_title"><span class="order">2</span><a href="#"
                    target="_blank" title="图片二">图片二</a></li>
            </ul>
            <ul class="item">
                <li class="i_thumb"><a href="#" target="_blank" title="图片三">
                    <img src="/Themes/Default/Images/images_test/3.jpg" alt="图片三" /></a></li>
                <li class="i_title"><span class="order">3</span><a href="#"
                    target="_blank" title="图片三">图片三</a></li>
            </ul>
            <ul class="item">
                <li class="i_thumb"><a href="#" target="_blank" title="图片四">
                    <img src="/Themes/Default/Images/images_test/4.jpg" alt="图片四" /></a></li>
                <li class="i_title"><span class="order">4</span><a href="#"
                    target="_blank" title="图片四">图片四</a></li>
            </ul>
            <div class="clear">
            </div>
        </div>
        <div class="showmore" id="showmore">
            <a class="handle" href="javascript:show()">显示更多结果</a></div>
    </div>
    <script type="text/javascript">
        var timespan = 5  //检测间隔时间(秒)
        var iHeight = 0;
        var iTop = 0;
        var clientHeight = 0;
        var iIntervalId = null;
        var pageNo = 1;   // 当前页数,默认设为第 1 页
        var pageSize = 4; // 每页显示的数量

        getPageHeight();

        // 添加定时检测事件,每2秒检测一次
        iIntervalId = setInterval("_onScroll();", timespan * 1000);

        // 取得当前页面显示所占用的高度
        function getPageHeight() {
            if (document.body.clientHeight && document.documentElement.clientHeight) {
                clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
            } else {
                clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
            }

            iHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);

        }

        // 调用ajax取服务端数据
        function show() {
            pageNo++;

            $.ajax({
                url: '/Test/Img?p=' + pageNo + '&r=' + Math.random(),
                type: 'GET',
                dataType: 'text',
                timeout: 4000,
                beforeSend: showLoadingImg,
                error: showFailure,
                success: showResponse
            });
        }

        function showLoadingImg() {
            $('#showmore').html('<a class="handle" href="javascript:show()"><img src="images_test/loading.gif" height="32px" />显示更多结果</a>');
        }

        function showFailure() {
            $('#showmore').html('<font color=red> 获取查询数据出错 </font>');
        }

        // 根据ajax取出来的json数据转换成html
        function showResponse(responseData) {
            var returnjson = eval("(" + responseData + ")");
            var itemsSize = returnjson.items.length;

            var nextpagehtml = '';
            var pageOffset = (pageNo - 1) * pageSize + 1;
            for (i = 0; i < itemsSize; i++) {
                nextpagehtml += '<ul class="item">';
                nextpagehtml += '<li class="i_thumb"><a href="#" target="_blank" title="' + returnjson.items[i].name + '"><img src="/Themes/Default/Images/' + returnjson.items[i].pic + '" alt="' + returnjson.items[i].name + '" /></a></li>';
                nextpagehtml += '<li class="i_title"><span class="order">' + (pageOffset + i) + '</span><a href="#" target="_blank" title="' + returnjson.items[i].name + '">' + returnjson.items[i].name + '</a></li>';
                nextpagehtml += '</ul>';
            }
            nextpagehtml += '<div class="clear"></div>';
            $(nextpagehtml).appendTo($("#items"));

            // 当前页码数小于3页时继续显示更多提示框
            if (pageNo < 3) {
                $('#showmore').html('<a class="handle" href="javascript:show()">显示更多结果</a>');
            } else {
                clearInterval(iIntervalId);
                $('#showmore').hide();
            }
        }

        // 判断滚动条是否到达底部
        function reachBottom() {
            var scrollTop = 0;
            if (document.documentElement && document.documentElement.scrollTop) {
                scrollTop = document.documentElement.scrollTop;
            } else if (document.body) {
                scrollTop = document.body.scrollTop;
            }
            if ((scrollTop > 0) && (scrollTop + clientHeight == iHeight)) {
                return true;
            } else {
                return false;
            }
        }

        // 检测事件,检测滚动条是否接近或到达页面的底部区域,0.99是为了更接近底部时
        function _onScroll() {
            iTop = document.documentElement.scrollTop + document.body.scrollTop;
            getPageHeight();
            if (((iTop + clientHeight) > parseInt(iHeight * 0.99)) || reachBottom()) {
                if (pageNo >= 3) {
                    clearInterval(iIntervalId);
                    $('#showmore').hide();
                    return;
                }
                show();
            }
        };
    </script>
</body>
</html>

二、Ajax后端页面

public ActionResult Img(string p)
        {
            p = DataTypeHelper.GetString(p, "2");
            if (p.Equals("2"))
            {
                return Content("{\"items\":[{\"name\":\"图片名\",\"pic\":\"images_test/5.jpg\"},{\"name\":\"图片名\",\"pic\":\"images_test/6.jpg\"}, {\"name\":\"图片名\",\"pic\":\"images_test/7.jpg\"}, {\"name\":\"图片名\",\"pic\":\"images_test/8.jpg\"}]}");
            }
            else if (p.Equals("3"))
            {
                return Content("{\"items\":[{\"name\":\"图片名\",\"pic\":\"images_test/9.jpg\"},{\"name\":\"图片名\",\"pic\":\"images_test/10.jpg\"}, {\"name\":\"图片名\",\"pic\":\"images_test/11.jpg\"}, {\"name\":\"图片名\",\"pic\":\"images_test/12.jpg\"}]}");
            }
            return Content("");
        }

posted on 2011-06-29 09:03  贵贵  阅读(445)  评论(0编辑  收藏  举报