jQuery来实现一个简易的瀑布流技术-优快云博客

本文深入讲解瀑布流技术，包括其工作原理、应用案例以及如何利用jQuery实现动态加载内容。通过两个实例，一是纯前端实现，二是结合Ajax和数据库通信，展示了瀑布流在减少服务器负载、提升用户体验方面的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

瀑布流技术

1.什么是瀑布流
简单说就是当用户拉动滚动条，当滚动条快要到达页面底部位置时候，我们就让页面加载一部分新的内容。（给大家一样效果图，如下）

2.瀑布流作用
例如：用户在使用淘宝手机浏览商品时候，因为商品展示的数据量较大，一般采用瀑布流的形式进行分段加载。这样子的好处在于可以减少对服务器数据加载的负担等等。。。

3.先来看一个非常简单的瀑流案例（此案例没有加入和数据库之间的数据读取操作，效果图如下）

上述案例实现的基本思路

整个页面结构主要由4个div组成。通过拉动滚动条来不断加载4个div，达到一个瀑布流的效果
理解并能够计算滚动条下拉的距离，理解窗口可视区的高度，页面的高度
当（滚动条下拉距离+窗口可视区的高度） > 页面的高度，在我们就实现页面内容的增加

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>瀑布流技术</title>
<script type="text/javascript" src="../js/jquery-2.0.3.min.js"></script>
<style type="text/css">
    body {margin: 0px;}
    #main {width: 840px; margin: 0 auto;}
    .flow {float:left;width:200px;margin:5px;background:#ABC;} 
</style>
<script type="text/javascript">
    $(function() {
        for (i = 0; i < 3; i++) {
          $(".flow").each(function(){
            $(this).append("<div style=\"width:90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;\"></div>");
          }
        }

        $(window).scroll(function() { //窗口滚动的监听事件
            var viewHeight = $(window).height(); //窗口的可视区的高度
            var pageHeight = $(document).height(); //页面的高度
            var scrollTop = $(this).scrollTop(); //计算窗口中滚动条拉动的距离
            if ((viewHeight + scrollTop) > (pageHeight - 20)) {
                if (scrollTop < 2000) { //限制内容无限的增长
                    $(".flow").each(function() {
                       $(this).append("<div style=\"width:90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;\"></div>");
                    });
                }
            }
        });
    });
    
    function getRandom(x,y) { //高度是200~300之间的Div
        var i = Math.random();
        i = parseInt(i * (y -x) + x);
        return i;
    }</script>
</head>
<body>
    <div id="main"> 
        <div class="flow" ></div> 
        <div class="flow" ></div> 
        <div class="flow" ></div> 
        <div class="flow" ></div> 
    </div> 
</body>
</html>

4.最后我们来看一个加入Ajax和数据库通信的瀑布流案例

后台服务器程序很简单就是一个Servlet
数据传递的格式JSON
前端页面用jQuery的Ajax方法

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>瀑布流技术</title>
<script type="text/javascript" src="../js/jquery-2.0.3.min.js"></script>
<style type="text/css">
    body {margin: 0px;}
    #main {width: 840px; margin: 0 auto;}
    .flow {float:left;width:200px;margin:5px;background:#ABC;} 
</style>
<script type="text/javascript">
    $(function() {
        for (i = 0; i < 3; i++) {
            $(".flow").each(function(i) {
                $.post("../ajax.do",{"v":"queryGoodsImg","rownum":getRandomRowNum()},function(data){
                    $.each(data, function(index, content) {
                        if (index == "imgPath") {
                            $(".flow:eq("+i+")").append("<div style=\"width:90%;margin:5px auto;background:#159;\"><img src='.."+content+"' style='width:180px'></div>");
                        }
                    });
                },"json");
            });        
        }
        $(window).scroll(function() { //窗口滚动的监听事件
            var viewHeight = $(window).height(); //窗口的可视区的高度
            var pageHeight = $(document).height(); //页面的高度
            var scrollTop = $(this).scrollTop(); //计算窗口中滚动条拉动的距离
            if ((viewHeight + scrollTop) > (pageHeight - 20)) {
                if (scrollTop < 2000) { //限制内容无限的增长
                    $(".flow").each(function(i) {
                        $.post("../ajax.do",{"v":"queryGoodsImg","rownum":getRandomRowNum()},function(data){
                            $.each(data, function(index, content) {
                                if (index == "imgPath") {
                                    $(".flow:eq("+i+")").append("<div style=\"width:90%;margin:5px auto;background:#159;\"><img src='.."+content+"' style='width:180px'></div>");
                                }
                            });
                        },"json");
                    });
                }
            }
        });
    });
    
    function getRandom(x,y) { //高度是200~300之间的Div
        var i = Math.random();
        i = parseInt(i * (y -x) + x);
        return i;
    }
    
    function getRandomRowNum() { //得到一个随机行号
        var i = parseInt(Math.random()*26+1);
        return i;
    }
    
</script>
</head>
<body>
    <div id="main"> 
        <div class="flow" ></div> 
        <div class="flow" ></div> 
        <div class="flow" ></div> 
        <div class="flow" ></div> 
    </div> 
</body>
</html>