WAP用户评论简单实现瀑布流加载
wap端经常会遇到产品或者评论的加载,但是分页的体验不是很好,所以选择通过js实现瀑布流加载方式。
第一步:需要动态加载的主要内容,这里需要动态加载的是li标签的内容
<ul class="back_ullist p20 back_ullist1" id="ulcontent">
<li class="clearfix solidB_gray1 pb15 mb15" id="@item._id.ToString()">
<div class="clearfix">
<ul class="star_wk gl clearfix fr mt5">
<li><img src="http://simg.xx.com.cn/custom/week/images/star1.png" width="30" height="30" alt="" /></li>
<li><img src="http://simg.xx.com.cn/custom/week/images/star.png" width="30" height="30" alt="" /></li>
</ul>
<a href="javascript:" class="fl">
<img class="photo_style mr10 " src="@user.headimgurl" width="117" height="117" alt="" />
</a>
<a class="fl f14 name_wk lh30 oe" href="#">@user.nickname</a>
</div>
<div class="cb pt10 gray9 f12">
@item.content
</div>
</li>
</ul>
第二步:检测页面位置
// 判断滚动条是否到底部
function checkscrollside() {
var arrBox = $('#ulcontent').children('li');
//获取最后一个瀑布流块的高度:距离网页顶部(实现未滚到底就开始加载)
var lastBoxH = arrBox.eq(arrBox.length - 1).offset().top;
var scrollTop = $(window).scrollTop()//获取滚动条卷走的高度
var documentH = $(window).height();;//显示页面文档的高
return (lastBoxH < scrollTop + documentH) ? true : false;//到达指定高度后 返回true,触发waterfall()函数
}
第三步:动态异步加载内容,每次追加5调数据
// 数据插入
function addDate() {
var lastid = $("#ulcontent>li:last").attr("id");
//console.log("获取ID" + lastid);
$.ajax({//注意同步加载数据设置
url: "@Url.Content("~/WeClass/LoadEvaluate")", async: false, type: "POST", data: { 'classId': '@Model.Id', 'lastId': lastid, 'count': 1 }, dataType: "json", success: function (msg) { $.each(msg, function (index, val) {
var star1="";
var star2="";
for (var i = 1; i <= val.score; i++)
{
star1+='<li><img src="http://simg.instrument.com.cn/custom/week/images/star1.png" width="30" height="30" alt="" /></li>';
}
for (var i = 1; i <= 5 - val.score; i++)
{
star2 += '<li><img src="http://simg.instrument.com.cn/custom/week/images/star.png" width="30" height="30" alt="" /></li>';
}
//var ulcontent = $("#ulcontent").innerHeight(); $("#ulcontent").append('<li class="clearfix solidB_gray1 pb15 mb15" id="' + val._id + '" >' +
'<div class="clearfix">' +
'<ul class="star_wk gl clearfix fr mt5">' + star1 + star2+'</ul>'+
'<a href="javascript:" class="fl">'+
'<img class="photo_style mr10 " src="'+val.headimgurl+'" width="117" height="117" alt="" />'+
'</a>'+
'<a class="fl f14 name_wk lh30 oe" href="javascript:">'+val.nickname+'</a>'+
'</div>'+
'<div class="cb pt10 gray9 f12">' + val.content + ' </div>' +
'</li>');
});
console.log(msg);
if (msg.length > 0)
{
var conheight = $("#ulcontent").height();
$("#ulcontent").height(conheight + 100);
}
}
});
}
第四步:后台根据自己的业务返回对应格式的json数据
省略。。。
第五步:动态设置元素的高度宽度
//主函数
function waterfall() {
var arrBox = $('#ulcontent').children('li');// box对象
var iBoxW = arrBox.eq(0).width();// 获取瀑布流块的宽度,注意width(),跟innerWidth()的区别
var num =Math.floor($(window).width() / iBoxW);//计算窗口能容纳几列
$('#ulcontent').css('width', iBoxW * num);//设置父级宽度
var arrBoxH = [];//数组,用于存储每列中的所有块框相加的高度
for (var i = 0; i < arrBox.length; i++) {//遍历数组瀑布流 块
var boxH =arrBox.eq(i).innerHeight();//获取当前块的高度
if (i < num) {
arrBox.eq(i).attr('style', '');//防止用户改变窗口大小,到时样式出错
arrBoxH[i] = boxH; //第一行中的num个块box 先添加进数组arrBoxH
} else {
var minH = Math.min.apply(null, arrBoxH);//获取数组arrBoxH中的最小值minH
var minHIndex = $.inArray(minH, arrBoxH);//使用jquery提供的工具
//arrBox.eq(i).css({ 'position': 'absolute', 'top': minH, 'left': minHIndex * iBoxW });//设置定位
arrBoxH[minHIndex] += arrBox.eq(i).innerHeight();//添加后,更新最小列高
}
}
}
第六步:动态检测是否加载流数据
$(function () {
waterfall();
////改变窗口大小时,重新排列
$(window).resize(function(){
waterfall();
});
//如果数据不够,没出现滚动条,自动加载数据
var time = setInterval(function () {
if (checkscrollside()) {
addDate();//插入数据
waterfall();//加载完数据从新排列
} else {
clearInterval(time);
$(window).scroll(function () {
if (checkscrollside()) {
addDate();
waterfall();
};
})
}
}, 1000); });
WAP用户评论简单实现瀑布流加载的更多相关文章
- js图片加载效果(延迟加载+瀑布流加载)
概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...
- js实现瀑布流加载图片效果
今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...
- css3多列布局瀑布流加载样式
看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...
- ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项
首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...
- jQuery ajax瀑布流加载静态的列表页面
1.加载一行数据 <script> //滚动加载事件 var Loadurl = "{$url}"; if(window.location.href !== Loadu ...
- [JS] 瀑布流加载
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- 利用JS实现简单的瀑布流效果
哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...
- 一个简单的AMD模块加载器
一个简单的AMD模块加载器 参考 https://github.com/JsAaron/NodeJs-Demo/tree/master/require PS Aaron大大的比我的完整 PS 这不是一 ...
- CAD从二进流加载数据(com接口VB语言)
主要用到函数说明: MxDrawXCustomFunction::ReadBinStreamEx 从二进流加载数据,详细说明如下: 参数 说明 IMxDrawBinStream* pBinStream ...
随机推荐
- Gym .101879 USP Try-outs (寒假自训第七场)
B .Aesthetics in poetry 题意:给定N个数,(N<2000 ,a[i] <=1e9),让你找一个最大的K,使得N个数膜K的余数个数全都等于N/K个. 思路:我们找到N ...
- P3084 [USACO13OPEN]照片Photo (dp+单调队列优化)
题目链接:传送门 题目: 题目描述 Farmer John has decided to assemble a panoramic photo of a lineup of his N cows ( ...
- Arrays ---------------copyOf赋值
- 《DSP using MATLAB》Problem 6.10
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- Ajax异步请求原理的分析
我们知道,在同步请求模型中,浏览器是直接向服务器发送请求,并直接接收.处理服务器响应的数据的.这就导致了浏览器发送完一个请求后,就只能干等着服务器那边处理请求,响应请求,在这期间其它事情都做不了.这就 ...
- 线程---插队和礼让执行(join和yield)
插队: 礼让:
- XML之命名空间的作用(xmlns)
http://www.w3school.com.cn/xml/xml_namespaces.asp http://blog.csdn.net/zhch152/article/details/81913 ...
- UTF-8 Invalid Byte Sequences
Chances are, some of you have run into the issue with the invalid byte sequence in UTF-8 error when ...
- oracle数据库经常提示27102 out of memory解决方法
网上有很多解决方案,但是我一个也看不懂,不知道写的什么鬼的东西,为什么一句话就能解决的事,非得长篇大论说原理是什么,看得一脸懵逼 我的解决方法入戏 vi /etc/sysctl.conf 修改kern ...
- MySQL导出用户权限
在MySQL 5.5/5.6版本中,使用SHOW GRANTS命令可以导出用户的创建脚本和授权脚本. hostname='127.0.0.1' port= username='root' passwo ...