jQuery ajax瀑布流加载静态的列表页面
1.加载一行数据
<script>
//滚动加载事件
var Loadurl = "{$url}";
if(window.location.href !== Loadurl){
window.location.href = Loadurl;
}
var pageTotal = "{ceil(min($total,$mintotal)/$pagesize)}";
// 异步加载
;(function($) {
var LoadContainer = "#list-ul-data-more"; //数据存放的容器ID
var Loading = "#spinnerIcn";//加载标志所在的容器CLASS
var pagenum = 1; //加载的页码,默认已经加载完第一页.
var isLoad = true; //是否在加载数据当中,是true,否false
$(window).on("resize scroll",function () {
var doc_T = $(document).scrollTop();
var win_H = $(window).height();
var loadTop = $(Loading).offset().top + $(Loading).children().height();
if(loadTop<= doc_T+win_H && isLoad && pagenum < pageTotal){
loadData();
} });
function loadData(){
isLoad = false;
pagenum++;
var url = Loadurl+pagenum+".shtml";
$.ajax({
url : url,
async : true,
type : 'get',
datatype: 'html',
success : function (html)
{
var start_data = html.indexOf('<span id="start-data-'+pagenum+'"></span>');
var stop_data = html.indexOf('<span id="stop-data-'+pagenum+'"></span>');
var LoadHtml = html.substring(start_data,stop_data)+'<span id="stop-data-'+pagenum+'"></span>';
$(LoadContainer).append(LoadHtml);
},
complete : function ()
{
isLoad = true;
if(pagenum >= pageTotal){
//设置正在加载标识
$("#spinnerIcn").hide();
} }
});
}
})(jQuery);
</script>
2.三列数据,从最小的开始加载
<script>
//滚动加载事件
var Loadurl = encodeURI("{$url}");
if(window.location.href !== Loadurl){
window.location.href = Loadurl;
}
var pageTotal = "{ceil(min($total,$mintotal)/$pagesize)}";
// 异步加载
;(function($) {
var LoadContainer = "#list-ul-data-more"; //数据存放的容器ID
var Loading = "#spinnerIcn";//加载标志所在的容器CLASS
var pagenum = 1; //加载的页码,默认已经加载完第一页.
var isLoad = true; //是否在加载数据当中,是true,否false
$(window).on("resize scroll",function () {
var doc_T = $(document).scrollTop();
var win_H = $(window).height();
var loadTop = $(Loading).offset().top + $(Loading).scrollTop() + $(Loading).height();
if(loadTop <= doc_T+win_H && isLoad && pagenum < pageTotal){
loadData();
} }); function loadData(){
isLoad = false;
pagenum++;
var url = Loadurl+pagenum+".shtml";
$.ajax({
url : url,
async : true,
type : 'get',
datatype: 'html',
success : function (html)
{
var start_data = html.indexOf('<span id="start-data-'+pagenum+'"></span>');
var stop_data = html.indexOf('<span id="stop-data-'+pagenum+'"></span>');
var LoadHtml = html.substring(start_data,stop_data)+'<span id="stop-data-'+pagenum+'"></span>';
$(LoadHtml).find('.three-col-item').each(function(i,v){
var li_html = $(v)[0].outerHTML;
var height = 0;
var ladElement = '';
$.each($('.col-md-4.three-col-wrap'),function(i,v){
if(i == 0){
height = $(this).height();
ladElement = $(this);
}else if(i > 0 && height > 0 && height > $(this).height()){
height = $(this).height();
ladElement = $(this);
}
});
ladElement.append(li_html);
}); },
complete : function ()
{
isLoad = true;
if(pagenum >= pageTotal){
//设置正在加载标识
$("#spinnerIcn").hide();
} }
});
}
})(jQuery);
</script>
jQuery ajax瀑布流加载静态的列表页面的更多相关文章
- WAP用户评论简单实现瀑布流加载
wap端经常会遇到产品或者评论的加载,但是分页的体验不是很好,所以选择通过js实现瀑布流加载方式. 第一步:需要动态加载的主要内容,这里需要动态加载的是li标签的内容 <ul class=&qu ...
- js图片加载效果(延迟加载+瀑布流加载)
概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...
- js实现瀑布流加载图片效果
今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...
- css3多列布局瀑布流加载样式
看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...
- 在ASP.NET MVC中使用jQuery的Load方法加载静态页面的一个注意点
使用使用jQuery的Load方法可以加载静态页面,本篇就在ASP.NET MVC下实现. Model先行: public class Article { public int Id { get; s ...
- [JS] 瀑布流加载
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项
首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...
- JQuery ajax 滚动底部加载更多
<%@ Page Language="C#" %> <%@ Import Namespace="System.IO" %> <%@ ...
- jquery+ajax无刷新加载数据,新闻浏览更多
<script type="text/javascript"> $(document).ready(function (){ $(window).scroll(fu ...
随机推荐
- activiti5/6 系列之--Activiti 读取并转换BPMN2文件
统一的BPMN标准,对工作流的流程定义采用BPMN统一格式.BPMN流程文件可以使用eclipse bpmn2插件开发比如eclipse bpmn2 modeler或者idea activiti插件. ...
- [c/c++] programming之路(22)、字符串(三)——字符串封装
项目结构 头文件.h #include<stdio.h> #include<stdlib.h> #include<string.h> //字符串封装,需要库函数 / ...
- 关于Could not read pom.xml和No plugin found for prefix 'tomcate7' in the current project
当时出现的错误: 有大神知道我这个错误怎么解决吗[ERROR] No plugin found for prefix 'tomcate7' in the current project and in ...
- openwrt为何需要refresh新增的补丁?
答:为了避免应用新补丁时出现无法应用的问题 如普通package的补丁refresh: make package/example/refresh V=s 如kernel的补丁refresh: make ...
- css实现横向进度条和竖向进度条
一.横向进度条 <html> <head> <title>横向进度条</title> <style type="text/css&quo ...
- 【C++】10.18日的C++笔记
使用memset初始化一个类会导致类中的指针和虚函数表出现问题.相关链接 使用memset(a,1,sizeof(a))初始化a数组不会达到预期的效果,因为memset会把每个字节赋值为1就会变成16 ...
- Architectural principles
原文 "If builders built buildings the way programmers wrote programs, then the first woodpecker t ...
- Pandas 基础(7) - Group By 分组的相关知识
首先, 引入这节需要的 csv 文件 (已上传) import pandas as pd city_df = pd.read_csv('/Users/rachel/Sites/pandas/py/pa ...
- Redis出现的问题
1):Could not connect to Redis at 127.0.0.1:6379: Connection refused 分析: 1-1:虚拟机中的 6379 端口可能没有开启 查看虚拟 ...
- 重建索引报错-python数据分析
obj3 = pd.Series([']) obj3.reindex(range(), method='ffill') 此时会爆出一大堆错误. 出错原因是:之前 obj3 的索引是字符串类型,重新索引 ...