滚动懒加载

最新推荐文章于 2024-11-01 00:03:29 发布
weixin_34054931
最新推荐文章于 2024-11-01 00:03:29 发布
阅读量88
点赞数
文章标签： json 开发工具 java
原文链接：http://www.cnblogs.com/maoriaty/p/8250684.html
版权
微相册记录
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/11/15
  Time: 17:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="com.binf.project.om201607.util.WxLocalUtil" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>流行美微现场</title>
    <%
        String fromopenid = (String) request.getSession().getAttribute("fromopenid");
        if ("fromopenid".equals(fromopenid))
            fromopenid = request.getParameter("fromopenid");
        String fullPath = request.getRequestURL().toString();
        String params = request.getQueryString()==null ? "" : "?" + request.getQueryString();
        HashMap aMap = WxLocalUtil.getWxConfig(fullPath + params);
    %>
    <style>
        .picBox{
            /*height: 110px;*/
            margin-bottom: 20px;
            position: relative;
        }
        img{
            display: block;
            margin: 0 auto;
            max-width: 100%;
            max-height: 100%;
        }
        .thumbnail{
            height: 100%;
            border-radius: 20px;
            padding: 0;
            margin: 0;
            overflow: hidden;
            border: 3px solid #fff;
        }
        .mask{
            position: fixed;
            left: 0;top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.6);
        }
        .innerBox{
            width: 90%;
            height: 425px;
            margin: 30px auto;

        }
        .download{
            position: absolute;
            left: 0;
            bottom: 30px;
            border-radius: 0;
            color: white;
            text-align: center;
            width: 100%;
        }
        .closeMask{
            position: absolute;
            top: 10px;right: 10px;
            font-size: 24px;
            color: white;
        }
        .contentBox{
            margin-top: 20px;
        }
        .thumbPicBox{
            width: 90%;
            background-color: #fff;
            text-align: center;
            margin: 0 auto;
            margin-top: 20px;
            margin-bottom: 40px;
            padding-bottom: 20px;
            color: #888;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 5px 5px 100px #ccc;
        }
        .thumbTitle{
            font-size: 18px;
        }

    </style>
</head>
<body>
<div class="containet-fluid">
    <div class="thumbPicBox">
        <img src="./img/banner2.jpg" alt="">
        <h1 class="thumbTitle">标题</h1>
    </div>
    <div class="contentBox clearfix"></div>
</div>
<div class="mask hidden"></div>
<script src="js/zepto.min.js"></script>
<script src="js/config.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    var userConfig = {
        openId: '<%=fromopenid%>',
        appId: '<%=aMap.get("appid")%>',
        timestamp: '<%=aMap.get("timestamp")%>',
        nonceStr: '<%=aMap.get("noncestr")%>',
        signature: '<%=aMap.get("signature")%>',
    }
</script>
<script>
    (function(){
        var pageNo = 0,pageSize = 7,flag = 0,flag2 = 0;
        function getParameter(name)
        {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  decodeURI(r[2]); return null;
        }
        $(".thumbTitle").html(getParameter("title"));
        function getImg(){
            pageNo++;
            $.post(config.SERVER.HOSTNAME+config.INTERFACE.GETIMGINFOWITHPAGE,{'pageNo': pageNo, 'pageSize': pageSize, 'cid': getParameter("cid")},function(result){
                console.log(JSON.stringify(result));
                if(result.pagenation.list.length == 0){
                        noImg();
                        return;
                }
//                var html = '<h1 class="title" style="text-align: center;"><span>'+getParameter("title")+'</span></h1>'+
                var html =  '<div class="contentPic clearfix">';
                for(var i=0;i<result.pagenation.list.length;i++){
                    html += '<div class="picBox col-xs-6">'+
                            '<a href="##" class="thumbnail">'+
                            '<img src="'+config.SERVER.HOSTNAME+result.pagenation.list[i].url+'" alt="">'+
                            '</a>'+
                            '</div>';
                }
                html += '</div>';
                $('.contentBox').append(html);
            },"json");
        }
        function getLazyImg(){
            pageNo++;
            $.post(config.SERVER.HOSTNAME+config.INTERFACE.GETIMGINFOWITHPAGE,{'pageNo': pageNo, 'pageSize': pageSize, 'cid': getParameter("cid")},function(result){
                console.log(JSON.stringify(result));
                if(result.pagenation.list.length == 0){
                    noImg();
                    return;
                }
                var html = '';
                for(var i=0;i<result.pagenation.list.length;i++){
                    html += '<div class="picBox col-xs-6">'+
                            '<a href="##" class="thumbnail">'+
                            '<img src="'+config.SERVER.HOSTNAME+result.pagenation.list[i].url+'" alt="">'+
                            '</a>'+
                            '</div>';
                }
                $('.contentPic').append(html);
                flag2 = 0;
            },"json");
        }
        function noImg(){
            if(!flag){
                var p = document.createElement('p');
                p.innerText = '没有更多的图片了';
                p.style.textAlign = 'center';
                document.body.appendChild(p);
                flag = 1;
            }
        }
        getImg();
        $(window).scroll(function(){
            if(($(document).height()-$(window).height())<=($(window).scrollTop()+40)){
//                console.log('开始加载！！！');
                if(!flag2){
                    flag2 = 1;
                    getLazyImg();
                }
            }
        });

//        点击查看大图
        $('.contentBox').delegate('img','click',function(){
            var html = '<div class="innerBox">'+
                    '<span class="closeMask">X</span>'+
                    '<img src="'+$(this).attr('src')+'" alt="下載圖片" />'+
                    '<p class="download">*长按图片保存本地</p>'+
                    '</div>';

            $('.mask').html("").removeClass('hidden').append(html);

        });
        $('.mask').delegate('.closeMask','click',function(){

            $('.mask').addClass('hidden');

        });

//        微信分享
        wx.config({
            //debug: true,
            appId: userConfig.appId,
            timestamp: userConfig.timestamp,
            nonceStr: userConfig.nonceStr,
            signature: userConfig.signature,
            jsApiList: ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone']
        });
        var shareConfig = {
            _title : '微相冊！',
            _link : config.SERVER.HOSTNAME+'/app/weixiangce/index.jsp',
            _imgUrl : config.SERVER.HOSTNAME + '/app/weixiangce/img/test.jpg',
            _desc : "聽君一席話，自掛東南枝！",
            _successWord : '分享成功，感谢您的参与！'
        };
        wx.ready(function(){
            wx.checkJsApi({
                jsApiList: ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'],
                success: function(res){
                    //alert('success');
                    console.log(res);
                }
            });
            //分享到朋友圈
            wx.onMenuShareTimeline({
                title: shareConfig._desc,
                link: shareConfig._link,
                imgUrl: shareConfig._imgUrl,
                success: function(){
                    alert(shareConfig._successWord);
                    $('.mask').addClass('hidden');
                }
            });
            //分享给朋友
            wx.onMenuShareAppMessage({
                title: shareConfig._title,
                desc: shareConfig._desc,
                link: shareConfig._link,
                imgUrl: shareConfig._imgUrl,
                success: function(){
                    alert(shareConfig._successWord);
                    $('.mask').addClass('hidden');
                }
            });
            wx.onMenuShareQQ({
                title: shareConfig._title,
                desc: shareConfig._desc,
                link: shareConfig._link,
                imgUrl:  shareConfig._imgUrl,
                success: function () {
                    alert(shareConfig._successWord);
                    $('.mask').addClass('hidden');
                }
            });
            wx.onMenuShareWeibo({
                title: shareConfig._title,
                desc: shareConfig._desc,
                link: shareConfig._link,
                imgUrl:  shareConfig._imgUrl,
                success: function () {
                    alert(shareConfig._successWord);
                    $('.mask').addClass('hidden');
                }
            });
            wx.onMenuShareQZone({
                title: shareConfig._title,
                desc: shareConfig._desc,
                link: shareConfig._link,
                imgUrl:  shareConfig._imgUrl,
                success: function () {
                    alert(shareConfig._successWord);
                    $('.mask').addClass('hidden');
                }
            });
        });
    }())
</script>
</body>
</html>