瀑布流

zsf53543831

于 2016-03-05 17:44:27 发布

阅读量274

点赞数

文章标签：瀑布流

本文链接：https://blog.csdn.net/zsf53543831/article/details/50809901

版权

<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>

zsf53543831

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
瀑布流

*{ 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: non
复制链接

扫一扫