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 ...
随机推荐
- Python sqlalchemy orm 常用操作
增add # 创建表1 # 注:高级封装 import sqlalchemy # 调用链接数据库 from sqlalchemy import create_engine # 调用基类Base fro ...
- [C++ Primer Plus] 第3章、处理数据(一)程序清单
一.程序清单3.1(变量的一些知识点) #include<iostream> #include<climits> using namespace std; void main( ...
- Git冲突和解决冲突-测试方法
原文链接:https://www.cnblogs.com/blogslee/p/6828659.html
- Bytom 技术 FAQ
比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom 1.如何 ...
- Deep Dream 模型
本节的代码参考了TensorFlow 源码中的示例程序https://github.com/tensorflow/tensorflow/tree/master/tensorflow/examples/ ...
- java Encryption&Decryption
The encryption class: package cn.com.smartcost.qy.util; import java.security.Key; import java.securi ...
- NodeJS:(二)基础常用API
node.js中文网:http://nodejs.cn/api/ (path.Buffer.events.fs) ①path路径-----const {resolve} = require('path ...
- js判断类型的四种方法
typeof:使用typeof可以很方便的判断六种类型:undefined.boolean.string.number.object.function 数组和null会被判断为object类型 ins ...
- git提交代码到码云详解
一.为什么不用github而使用码云? 私有——免费,速度快 二.怎么用? 1.下载安装好git. 2.去码云官网注册个账号.官网:https://git.oschina.net/ 3.创建项目.项目 ...
- Innodb中的行锁与表锁
在Innodb引擎中既支持行锁也支持表锁,那么什么时候会锁住整张表,什么时候或只锁住一行呢? InnoDB行锁是通过给索引上的索引项加锁来实现的,这一点MySQL与Oracle不同,后者是通过在数据块 ...