ajax瀑布流插件,jQuery瀑布流无限加载插件:jquery.falless.js
慌慌张张,匆匆忙忙,为何生活总是这样?
难道说,我的理想,就是这样度过一生的时光?...........
真的是一年一年飞逝而去,而人的一生,又有几个一年?
第一个四年即将结束,得到了什么?又失去了什么?仔细想想,却并没有答案。而夜深人静的时候,想起四年前的自己,三年前的自己,真的和现在的自己不一样了。现在这样的我,还依旧是我吗?不知道。
不过就像《活着》这首歌中所表达的那样,生活,也许真的就是这样。又有多少人能真正实现自己的理想?又有多少人,能在岁月的洗涤中,始终带着最初的微笑呢?
没办法,这就是活着。 急不得。不管你对成功是多么渴望。
努力过好每一天,不要总是每天对未来充满幻想,因为未来的事儿,又有谁能知道呢?就像昨天追寻双塔的两万八千步的小小旅途中,谁又能知道,途中会看到那么完美的彩虹?谁又会知道,会走那么崎岖的路?
弄了半天,弄出来个很不错的效果,经典的瀑布流加无限加载!
就是,类似于百度图片加载一样,一张网页中,信息永远加载不完(当然,你首先要有那么多信息)。
这个东西不是很难做。
做出来后,又将他封装成了一个jquery插件。自我感觉还是很好用的。嘿嘿,骄傲一下!
当然,还不是很完美,和大型插件有些距离。
;(function($){
$.extend({
'falless':function(options){
options = $.extend({
'isLoop':false,
'rootSelector':'#falless',
'listSelector':'.box-list',
'pageSize':10,
'itemWidth':100,
'listMarginWidth':10,
'translateStyle':true,
'alphaStyle':true,
'translateStart':'-100px',
'translateEnd':'10px',
'alphaStart':'0',
'alphaEnd':'1',
'ajaxUrl':null,
'factory':null,
},options);
var countPosition = 0;
var $root = null;
var $minBoxList = null;
var isAjaxing=false;
var isDataEnd = false;
$('',{'type':'text/css'})
.html(options.listSelector+'{'+
'width:'+options.itemWidth+'px;'+
'float: left;'+
'margin-right:'+options.listMarginWidth+'px;'+
'}')
.appendTo('head');
function ajaxQuery(startPos,pageSize)
{
isAjaxing = true;
$.ajax({
'url':options.ajaxUrl,
'data':{
'startPos':startPos,
'pageSize':pageSize,
},
'success':function(d){
var eleList=[];
var $boxList = $root.find(options.listSelector);
var jsonArr = JSON.parse(d);
if($minBoxList == null) $minBoxList = $($boxList.get(0));
if(jsonArr.length == 0){
isDataEnd = true;
if(options.isLoop){
countPosition = 0;
isDataEnd = false;
}
}
countPosition += jsonArr.length;
for(var i=0;i
{
var $ele = $(options.factory(jsonArr[i]));
for(var k=0;k
{
if( $($boxList.get(k)).height() < $minBoxList.height() ){
$minBoxList = $($boxList.get(k));
}
}
$ele.appendTo($minBoxList);
if(options.alphaStyle) $ele.css('opacity',options.alphaStart);
if(options.translateStyle) $ele.css('margin-top',options.translateStart);
eleList.push($ele);
}
for(var i=0;i
{
if(options.alphaStyle) eleList[i].css('opacity',options.alphaEnd);
if(options.translateStyle) eleList[i].css('margin-top',options.translateEnd);
}
isAjaxing = false;
},
});
}
function init(root)
{
$root = $(root);
var w = $(root).width();
var margin = options.listMarginWidth;
var itemWidth = options.itemWidth;
var count = Math.floor(w/(margin+itemWidth));
for(var i=0;i
{
$('
}
ajaxQuery(countPosition,options.pageSize);
$(window).on('scroll',function(e){
var scrollTop = $(window).scrollTop()+$(window).height();
var minOffsetTop = 0;
if($minBoxList != null) minOffsetTop = $minBoxList.offset().top + $minBoxList.height();
if(!isAjaxing && scrollTop > minOffsetTop){
if(options.isLoop){
ajaxQuery(countPosition,options.pageSize);
}else{
if(!isDataEnd) ajaxQuery(countPosition,options.pageSize);
}
}
});
}
init($(options.rootSelector).get(0));
},
});
})(jQuery);
简简单单一百行代码而已!下面说明一下使用方法(参数说明):
'isLoop':false, // 是否无限循环?(否的话就是数据库中的数据读完就over不加载了)
'rootSelector':'#falless', // 根元素选择器
'listSelector':'.box-list', //列元素类名
'pageSize':10, // 每次加载数据最大个数
'itemWidth':100, //列宽度
'listMarginWidth':10, //列外边距
'translateStyle':true, //是否开启滑动加载特效
'alphaStyle':true, //是否开启透明度加载特效
'translateStart':'-100px', //滑动起始位置
'translateEnd':'10px', //滑动终止位置
'alphaStart':'0', //透明度起始位置
'alphaEnd':'1', //透明度终止位置
'ajaxUrl':null, //数据请求的url
'factory':null, // 工厂函数,用于生产表现元素,参数就是一个对象
服务端被请求的页面需要为前端提供json数据,至于什么样的数据嘛,就要看自己的需求了。
例如(jsp):
public MrActionForward doAction(HttpServletRequest req,
HttpServletResponse resp) throws ServletException, IOException {
int startPos = Integer.parseInt(req.getParameter("startPos"));
int pageSize = Integer.parseInt(req.getParameter("pageSize"));
PrintWriter out = resp.getWriter();
StringBuilder sb = new StringBuilder();
ChuanQueryUtilBean chuanUtilBean = new ChuanQueryUtilBean(startPos, pageSize);
List rList = chuanUtilBean.getResultList();
sb.append("[");
for(int i=0;i
{
sb.append("{");
sb.append("\"id\":");
sb.append(rList.get(i).id+",");
sb.append("\"username\":");
sb.append("\""+MrUtil.X11N.toClientParam(rList.get(i).username)+"\""+",");
sb.append("\"title\":");
sb.append("\""+MrUtil.X11N.toClientParam(rList.get(i).title)+"\""+",");
sb.append("\"grtnum\":");
sb.append(rList.get(i).grtnum+",");
sb.append("\"path\":");
sb.append("\""+MrUtil.X11N.toClientParam(rList.get(i).path)+"\"");
sb.append("},");
}
String res = sb.length()==1?"[]":sb.substring(0, sb.length()-1)+"]";
Pattern CRLF = Pattern.compile("(\r\n|\r|\n|\n\r)");
Matcher m = CRLF.matcher(res);
if(m.find()){
res = m.replaceAll("");
}
out.print(res);
return null;
}
注意,服务端接受的参数必须有 startPos(起始位置),pageSize(页面大小),用于在数据库获取数据。
调用的话,示例如下:
$.falless({
isLoop:true,
alphaStyle:true,
translateStyle:true,
itemWidth:240,
rootSelector:'#main',
ajaxUrl:'chuanQuery.mr',
factory:function(d){
return '
'
'+
''+
''+
'
'+
''+d.title+''+
''+
'
'+
'
'+
''+d.username+''+
'赞:'+d.grtnum+''+
'
'+
'
'+
'';
},
});
ajax瀑布流插件,jQuery瀑布流无限加载插件:jquery.falless.js相关推荐
- 从零开始实现ASP.NET Core MVC的插件式开发(六) - 如何加载插件引用
标题:从零开始实现ASP.NET Core MVC的插件式开发(六) - 如何加载插件引用. 作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun/p/1171 ...
- JRoll 2 使用文档(史上最强大的下拉刷新,滚动,无限加载插件)
概述 说明 JRoll,一款能滚起上万条数据,具有滑动加速.回弹.缩放.滚动条.滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费的轻量级html5滚动插件. JRoll第二版是 ...
- ArcGIS插件 - 易至天工影像加载插件
众所周知,谷歌地图由于其分辨率高.更新速度快,且一直免费,受到行业内外各种人士的青睐,也正因如此,有人利用,有人嫉妒,导致它在国内市场无法再继续下去了.各大相关软件产商也主动或被动下架相关服务,可还是 ...
- 【Android 插件化】基于插件化的恶意软件的加载策略分析 ( 自定义路径加载插件 | 系统路径加载插件 | 用户同意后加载插件 | 隐藏恶意插件 )
文章目录 一.自定义路径加载插件 二.系统路径加载插件 三.用户同意后加载插件 四.隐藏恶意插件 一.自定义路径加载插件 插件化应用中 , 宿主应用 加载 插件 APK , 需要获取该插件 APK 文 ...
- 插件化基础(二)——加载插件资源
系列文章目录: 插件化基础(一)--加载插件的类 插件化基础(二)--加载插件资源 插件化基础(三)--启动插件组件 一.了解 Asset 和 Resources 我们加载的资源通常来自 res 和 ...
- Android 插件化之—— 加载插件中的资源
Android 资源分类: res目录下的资源 res目录下的资源可以通过Resource对象进行访问,通过分析Resource源码可知,Resource访问res目录下的资源其实还是调用的Asset ...
- wi8ndows无法加载,Win8.1系统更新Flash插件后无法自动加载插件怎么办
当前,为了实现各种编码格式的音频.视频节目的播放,不少第三方媒体提供商均开发了自己的播放器插件,提供音频.视频节目的网站一般会提示您下载.安装相应的插件或程序.Flash是Win8.1系统内置的播放器 ...
- CobaltStrike加载插件
目录 CobaltStrike加载插件 客户端加载 服务端加载 CobaltStrike常见插件 CobaltStrike加载插件 CobaltStrike有两种加载插件的方法,一种是在客户端加载,一 ...
- 利用ajax实现织梦dedecms瀑布流无限加载功能
该功能主要用到AJAX技术! 一.首先找到并打开/plus/list.php文件,在里面找到如下代码: require_once(dirname(__FILE__)."/../include ...
最新文章
- python使用matplotlib可视化、使用annotate函数以及arrowprops参数在可视化图像中添加箭头和文本注释(arrow and text annotation)
- 这份HCIE-Routing Switching笔试试题,你能答对几道?
- 有什么办法可以判断页面是静态还是动态?_网络营销——网络营销专员到底是教你如何选择网站页面制作...
- mybatis中mapUnderscoreToCamelCase自动驼峰命名转换
- Unity C# 设计模式(一)单例模式
- ant design Modal关闭时清除数据的解决方案
- gwas snp 和_eQTL和GWAS还可以这样玩
- IIS32位,64位模式下切换
- skynet源码阅读7--死循环检测
- 【Python3】待解决的疑问
- 基于PaddleHub实现简易人像抠图
- 第十八章、ActiveX控件
- 企业实现均衡生产,车间管理系统来支持
- 房地产开发商崩盘样本:楼盘捂了两年,欠40亿巨债
- CCF A类会议或期刊----近两年对比学习相关论文
- GitHub上这个微信防撤回的开源项目,99%的程序员不知道
- 互联网晚报 | 3月8日 星期二 |​ ​​王传福卸任杭州比亚迪董事长;苏宁易购:南京银行拟收购苏宁消费金融36%股权...
- 在带头结点单链表中查找最大值,将其与最后一个元素交换(交换值)
- 区块链如何改变供应链金融
- css overflow属性及使用方法(场景)
热门文章
- 杭州保俶塔实验机器人_资讯 | 智慧与挑战!2017年西湖区中小学生科技节智能机器人比赛成绩出炉啦...
- SpringMVC总结-SpringMVC的运行流程以及简单运用
- 基于S7-1200 PLC实现PIDNN控制仿真
- 【数字化】“网络效应”指南:13 种网络效应全解析,带你了解巨头成功的秘密
- 长尾分布(long-tail distribution)和长尾效应
- uniapp之adbWIFI调试
- 利用ps生成闪电特效
- vue element Pagination分页组件二次封装
- lol祖安服务器维护,触目惊心 被演员与代练所“支配”的英雄联盟
- 为什么要学习 Linux?