滚轮向下滚，自动加载内容

来源：互联网发布：如何练出完美胸肌知乎编辑：程序博客网时间：2024/04/29 11:59
2016/02/27 20:52
昨天学习到了一个自动加载内容的方法，这个方法使用了ajax的调用，不用刷新页面，自动加载。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"  %><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%><%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %><%@ include file="../../common/base.jsp"%><!doctype html><html><head><meta charset="utf-8"><title>首页</title><%@ include file="../../common/baseJs.jsp"%><link href="${basePath}/assets/css/index.css" rel="stylesheet" type="text/css"><link href="${basePath}/assets/css/text_btn_control.css"rel="stylesheet" type="text/css"><script type="text/javascript" src="${basePath}/assets/plugins/jquery/lrtk.js"></script><script type="text/javascript" src="${basePath}/assets/plugins/jquery/header-list.js"></script><script type="text/javascript" src="${basePath}/assets/tools/sysdate.js"></script><script type="text/javascript"src="${basePath}/assets/plugins/jquery/jquery.leanModal.min.js"></script><script type="text/javascript">var userId;var pageSize = 3;var refreshOk = true;var nextpage = 1;var display_list_details = true;//加载对象var showGallery = function(rows) {for (var i = 0; i < rows.length; i++) {var row = rows[i];var $galleryA = $('<a href="#" class="photos-list">');var $img = $('<img height="280" width="280" src="">');$img.attr("src", row.coverImageUrl);var $galleryImg = $('<img>');$galleryImg.attr("src", row.coverImageUrl);var $galleryNameSpan = $('<span class="black-card">');var $galleryNameP = $('<p>');if (row.name) {$galleryNameP.text(row.name);}$galleryNameSpan.append($galleryNameP);$galleryA.append($img);$galleryA.append($galleryNameSpan);$galleryA.attr("href", "${basePath}/mine/photos/" + row.id + "/edit");$('div.photos-xs').find(".clearfix").before($galleryA);}}//用户列表var findGallery = function() {if (!userId) {return;}if (!refreshOk) {return;}//alert("1"+userId+pageSize+nextpage+display_list_details);refreshOk = false;//查询图集列表$.ajax({type : 'GET',url : "${basePath}/mine/photos/find01",data : {"userId" : userId,"page" : nextpage,"rows" : pageSize,"display_list_details" : display_list_details},success : function(data) {if (console && console.log) {console.log({"method" : "init","data" : data});}if (data) {if (data.length > 0) {nextpage++;showGallery(data);refreshOk = true;}} else {if (console && console.log) {console.log("查询异常:");console.log(data);}}},error : function() {refreshOk = true;if (console && console.log) {console.log(500);}}});}$(document).ready(function() {userId = $("div.user-header").attr("usercode");findGallery();$(window).scroll(function() {//$(document).scrollTop() 获取垂直滚动的距离//$(document).scrollLeft() 这是获取水平滚动条的距离if ($(document).scrollTop() + 360 >= $(document).height()- $(window).height()) {findGallery();}});});$(function() {$('#loginform').submit(function(e) {return false;$(center).hide()});$('#modaltrigger').leanModal({top : 110,overlay : 0.45,closeButton : ".hidemodal"});$('#loginbtn').click(function(e) {$('#modaltrigger').hide()});$('#modaltrigger').show();});function formSubmit() {$("#photosAdd").submit();}</script></head><body><%@ include file="../../common/header.jsp"%><!--header--><div id="content"><%@ include file="mine_header.jsp"%><!--user header--><div class="user-photos-cover"><div class="user-cover-left">1</div><div class="user-cover-right"><div class="photos-wrap"><div class="header-1">用户图集</div><div class="photos-card"><a href="#loginmodal" class="photos-list-first flatbtn"id="modaltrigger"><div class="wp-cell"><div class="new-project"></div><div class="new-project-t">新项目</div></div></a><div class="photos-xs"><div class="clearfix"></div></div><div class="clearfix"></div></div><!-- 模态框开始 --><div id="loginmodal" style="display: none;"><h1>新增图集</h1><form id='photosAdd' action="/mine/photos/add" method="post"><div class="form-group"><label>图集名称<span class="edit-star">*</span></label> <inputtype="text" name="name"></div><div class="form-group"><label class="mandatory">图集描述<span class="edit-star">*</span></label><textarea name="descrption" placeholder="对你的图集进行描述..."></textarea></div><input type="submit" onclick="formSubmit" value="确定"></form><!-- 模态框结束 --></div></div><div class="clearfix"></div></div></div><%@ include file="../../common/footer.jsp"%></body></html>
0 0