我的瀑布流实现

<script type="text/javascript">
    var numPage=2;
    var sumPageCount=$("#sumPageCount").val();
    //给窗口绑定滚动条滚动事件
 $(document).ready(function(){
	 $(‘#loading‘).shCircleLoader();
	 $("#loading").css(‘display‘,‘none‘);
	 window.onscroll = loadMore;
 });

 function loadMore(){
	 // 然后判断窗口的滚动条是否接近页面底部，这里的20可以自定义
	 //滚动条距离底部还是20像素的时候开始加载下一页数据
	 if(numPage<=parseInt(sumPageCount)){
     if (parseInt($(document).scrollTop() + $(window).height()) > parseInt($(document).height() - 100)) {
    	 window.onscroll = null;//为防止重复执行，先清除事件
    	 //显示加载效果
    	  $("#loading").css(‘display‘,‘block‘);
    	 //alert("前台页码：要开始加载第"+numPage+"页的数据");
    	 var type=$("#type").val();
    	  var htmlText="";
		 $.ajax({
          url : "${ctx}/bbs/bbsMoreContent",
          data:{
          	"numPage":numPage,
          	"type":type
          },
          dataType : ‘json‘,
          success : function(data)
          {
    	  // alert("后台页码：已经加载了第"+numPage+"页的数据");
          	numPage=numPage+1;
             //alert("加载数据的总列数："+data.bbsthemelist.length);
             $.each(data.bbsthemelist,function(index,item){
               htmlText=htmlText+"<li style=‘list-style-type:none;‘><div class=‘list-group-item‘><h4 class=‘list-group-item-heading‘ >"+
				    "<a href=‘${ctx}/bbs/bbsreply?id="+item.id+"&type=${type}‘>"+item.title+"</a>"+
				"</h4> <p class=‘list-group-item-text‘>"+
				  item.content+
				"</p><h6 class=‘list-group-item-heading‘><span class=‘glyphicon glyphicon-eye-open‘>"
				+item.viewnum+
				"</span>|<span class=‘glyphicon glyphicon-pencil‘>"
				+item.floor+"</span>|<span class=‘glyphicon glyphicon-user‘>"
				+item.createuser+"</span>|<span class=‘glyphicon glyphicon-calendar‘>"
				+item.updatetime+"</span></h6></div></li>";
           });
             $("#themeList").append(htmlText);
             setTimeout(function(){
    		     $("#loading").css(‘display‘,‘none‘);
                    window.onscroll =loadMore;
    		  },3000);
          }
        });
     }
	   }
 }
 </script>

相应的HTML代码：

<div class="list-group">
		     <a href="#" class="list-group-item active">帖子列表    ${sessionScope.user.name}  ${sessionScope.user.phone}</a>
		     <ul id="themeList" style="list-style-type:none;padding-left:0px;">
		     <c:forEach items="${bbsthemelist}" var="bbstheme">
				<li style="list-style-type:none;">
				<div  class="list-group-item">
					<h4 class="list-group-item-heading" >
					    <a href="${ctx}/bbs/bbsreply?id=${bbstheme.id}&type=${type}">${bbstheme.title}</a>
					</h4>
					<p class="list-group-item-text">
						${bbstheme.content}
					</p>
					<h6 class="list-group-item-heading" >
					     <span class="glyphicon glyphicon-eye-open">${bbstheme.viewnum}</span>|
					      <span class="glyphicon glyphicon-pencil">${bbstheme.floor}</span>|
					    <span class="glyphicon glyphicon-user">${bbstheme.createuser}</span>|
					   <span class="glyphicon glyphicon-calendar">${bbstheme.updatetime }</span>
					</h6>
				</div>
				</li>
				</c:forEach>
				</ul>
				<div class="loading loading7" id="loading"></div>
				<a class="list-group-item active"></a>
  </div>