您的位置：首页 > 其它

瀑布流

2016-03-05 17:44 309 查看 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">
*{ padding:0px;margin:0px;}
.container { width:900px;background-color:Gray;margin:15px auto;padding-top: 10px;}
.container ul {    float: left; width: 215px; margin:5px;list-style: none;}
.container ul  li{ list-style: none; margin:5px 0px;width: 213px; border:1px solid}
.loading{ margin:10px auto;width:20px;display:none;}
</style>
<script type="text/javascript">
$(function () {
var liHeights = [100, 200, 321, 243, 432, 123];//随机高度
var liColores = ["black", "red", "green", "gold", "blue", "orange"];//随机边框颜色
var ulCount = $(".container ul").length;//ul的数量
var index = 0;//轮流给ul下面添加li 记录ul的索引
var maxUlHeight = 0; //ul的最大高度 给外部的container赋值高度
var loadingCount = 0; //最大加载5次
var isLoading = false; //防止一次性加载多次
GetLoading();
//滚动到浏览器底部加载数据
$(window).scroll(function () {
var documentHeight = $(document).height();
var scrollTop = $(document).scrollTop();
var windowHeight = $(window).height();
if (scrollTop + windowHeight > documentHeight - 30) {
//如果没有在加载 则执行加载方法；如果有正在加载中 则不允许再次加载
if (!isLoading) {
isLoading = true;
GetLoading();
}
}
})
function GetLoading() {
$(".loading").show();//加载图片显示
loadingCount++; //循环次数加1
var timeout = setTimeout(function () {
var liContents = [];//li里存放的文本内容
for (var i = 0; i < 12; i++) {
liContents[liContents.length] = i;
}
//循环给ul加载li
for (var i = 0; i < liContents.length; i++) {
$(".container ul:eq(" + index + ")").append("<li style='height:" + (GetArrayRandomValue(liHeights)) + "px;border-color:" + (GetArrayRandomValue(liColores)) + "'>" + (liContents[i] + "_" + loadingCount) + "</li>");
maxUlHeight = $(".container ul:eq(" + index + ")").height() > maxUlHeight ? $(".container ul:eq(" + index + ")").height() : maxUlHeight;
$(".container").height(maxUlHeight + 15);
index = ++index >= ulCount ? 0 : index;
}
$(".loading").hide();
clearTimeout(timeout);
isLoading = false;
}, 1000);
//如果加载够5次（或者没有更多的数据了） 则解绑滚动事件
if (loadingCount >= 5) {
$(window).unbind();
}

}
})
function GetArrayRandomValue(array) {
return array[Math.floor(Math.random() * array.length)];
}
</script>
</head>
<body>
<div class="container">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
<div class="loading"><img src="images/loading.gif" width="20" height="20"/></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航