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

            });