Ajax实现瀑布流动态加载网页

版权声明：懂我的人，无需声明。不懂我的人，何须声明。 https://blog.csdn.net/Earl_yuan/article/details/49120197

瀑布流的动态加载效果是我一直以来觉得最喜欢的效果之一了。最近在工作中遇到了一个情景，当我登录到系统中时，需要向另一个系统发送多次接口查询数据，之后再将这些数据显示到页面上。这就存在了这样一个问题：页面加载的时间过长，用户在登陆后就需要一直等待接口全部查询完毕后才能登录到系统中。这大大的降低了用户体验。所以我就决定使用瀑布流的效果来加载页面，在用户登陆后，先只查询一个接口，返显数据到页面上，这时用户就登陆到系统中了。当用户向下滚动窗口时，到指定的位置后再去查询剩下的接口，这样用户的体验就较之前的效果有所提升了。

瀑布流动态加载的原理：加载触发主要是通过js实现的。在页面的某个地方设置一个标记，当页面滚动到这个标记的位置时，触发加载。具体代码如下：

var flagPos = $("#waterfallflag").offset().top;
	$(window).scroll(function() {
		if ((getScrollTop() + getClientHeight()) > flagPos) {
			$(".spinner").show();
			$.post("waterfall/waterfall", function(data) {
				if (data != null) {
					setTimeout(function() {
						$(".spinner").hide("normal");
						$("#part1").append(data);
						$("#part1").removeAttr("id");
					}, 800);
				}
			}, "html");
			flagPos = getScrollHeight();
		}
	});

代码解释：waterfallflag就是我设置的触发加载的标记点。offset().top是标记点距离最顶端的距离。getScrollTop方法是获取当前窗口顶端与当前页面对象最顶端之间的距离。getClintHeight方法是获取当前页面可见范围的高度。$(".spinner").show()是一个动态的加载等待的效果显示。这里使用Ajax异步的去查询接口，并将第二次查询接口的数据填充到jsp页面中，将页面作为返回值返回到当前页面。$("#part1")是一个div，用于显示返回的页面数据。getScrollHeight方法是获取正文全文的高度。

点击这里下载demo的源代码

源代码我也托管到了github上，也可以通过这个链接获取到项目的源代码。