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 ...
随机推荐
- SVN冲突以及解决办法
1.冲突原因: 假设 A.B 两个用户都在版本号为 100 的时候,更新了 kingtuns.txt 这个文件,A 用户在修改完成之后提交 kingtuns.txt 到服务器, 这个时候提交成功,这个 ...
- tp剩余未验证内容-6
杂项 系统中的电感线圈元件, 虽然不消耗电能, 但是会 占用系统的容量(相当于占用资源但是不做事), 会使系统 的发电量的使用效率降低, 线路损耗增大, 发出同样有功用电量所需的设备容量扩大 将感性元 ...
- FJUT3703 这还是一道数论题(二分 + hash + manacher 或者 STL + hash 或者 后缀数组 + hash)题解
Problem Description 最后来个字符串签个到吧,这题其实并不难,所需的算法比较基础,甚至你们最近还上过课. 为了降低难度,免得所有人爆零.这里给几个提示的关键字 :字符串,回文,二分, ...
- Qt自定义阴影效果和QOpenGLWidget冲突导致控件不刷新
Qt5.6.2版本存在这样一个问题(其它版本未测试),当main函数中设置了application.setAttribute(Qt::AA_NativeWindows)(用于使得每个子界面都可以获取w ...
- inline-block有间隙的兼容处理
- php格式化json字符串
header('content-type:application/json;charset=utf8'); $arr = array( 'status' => true, 'errMsg' =& ...
- 20175317 《Java程序设计》第一周学习总结
20175317 <Java程序设计>第一周学习总结 教材学习内容总结 本周学习了Java大致的开发步骤,完成了课件自带的习题. 学习了在windows与Linux系统下不同的编译方法,掌 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 条件设置行背景颜色
jQuery EasyUI 数据网格 - 条件设置行背景颜色 本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...
- ActiveRecord Nested Atrributes 关联记录,对嵌套属性进行CURD
设置了Nested attributes后,你可以通过父记录来更新/新建/删除关联记录. 使用: #accepts_nested_attributes_for class method. 例如: cl ...
- 强化git
[场景1]git 提交本地代码到远程master 1.git init 2.git add . 3.git commit -m " " 4.git remote add origi ...