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瀑布流加载静态的列表页面的更多相关文章

  1. WAP用户评论简单实现瀑布流加载

    wap端经常会遇到产品或者评论的加载,但是分页的体验不是很好,所以选择通过js实现瀑布流加载方式. 第一步:需要动态加载的主要内容,这里需要动态加载的是li标签的内容 <ul class=&qu ...

  2. js图片加载效果(延迟加载+瀑布流加载)

    概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...

  3. js实现瀑布流加载图片效果

    今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...

  4. css3多列布局瀑布流加载样式

    看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...

  5. 在ASP.NET MVC中使用jQuery的Load方法加载静态页面的一个注意点

    使用使用jQuery的Load方法可以加载静态页面,本篇就在ASP.NET MVC下实现. Model先行: public class Article { public int Id { get; s ...

  6. [JS] 瀑布流加载

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  7. ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项

    首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...

  8. JQuery ajax 滚动底部加载更多

    <%@ Page Language="C#" %> <%@ Import Namespace="System.IO" %> <%@ ...

  9. jquery+ajax无刷新加载数据,新闻浏览更多

      <script type="text/javascript"> $(document).ready(function (){ $(window).scroll(fu ...

随机推荐

  1. activiti5/6 系列之--Activiti 读取并转换BPMN2文件

    统一的BPMN标准,对工作流的流程定义采用BPMN统一格式.BPMN流程文件可以使用eclipse bpmn2插件开发比如eclipse bpmn2 modeler或者idea activiti插件. ...

  2. [c/c++] programming之路(22)、字符串(三)——字符串封装

    项目结构 头文件.h #include<stdio.h> #include<stdlib.h> #include<string.h> //字符串封装,需要库函数 / ...

  3. 关于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 ...

  4. openwrt为何需要refresh新增的补丁?

    答:为了避免应用新补丁时出现无法应用的问题 如普通package的补丁refresh: make package/example/refresh V=s 如kernel的补丁refresh: make ...

  5. css实现横向进度条和竖向进度条

    一.横向进度条 <html> <head> <title>横向进度条</title> <style type="text/css&quo ...

  6. 【C++】10.18日的C++笔记

    使用memset初始化一个类会导致类中的指针和虚函数表出现问题.相关链接 使用memset(a,1,sizeof(a))初始化a数组不会达到预期的效果,因为memset会把每个字节赋值为1就会变成16 ...

  7. Architectural principles

    原文 "If builders built buildings the way programmers wrote programs, then the first woodpecker t ...

  8. Pandas 基础(7) - Group By 分组的相关知识

    首先, 引入这节需要的 csv 文件 (已上传) import pandas as pd city_df = pd.read_csv('/Users/rachel/Sites/pandas/py/pa ...

  9. Redis出现的问题

    1):Could not connect to Redis at 127.0.0.1:6379: Connection refused 分析: 1-1:虚拟机中的 6379 端口可能没有开启 查看虚拟 ...

  10. 重建索引报错-python数据分析

    obj3 = pd.Series([']) obj3.reindex(range(), method='ffill') 此时会爆出一大堆错误. 出错原因是:之前 obj3 的索引是字符串类型,重新索引 ...