jsp瀑布流功能的实现

目前比较流行的一种图片展示效果名为瀑布流，有很多的知名网站在应用这个功能，今天在百度查询了一下多数为jquery脚本和php源码，所以今天抽空实现了一下jsp版本瀑布流的功能，可以和学习jsp的童鞋们一起分享学习一下下吧。

 

为什么用使用瀑布流模式？

   现在很多的网站或程序每个栏目或功能里面包含很多的数据，有文字信息，图片信息等。如果一次性将所有的信息加载到页面这样不仅消耗系统资源大而且影响客户端浏览速度，还有一种方法就是做分页。而瀑布流就是结合以上两种形式，客户端浏览时不仅系统资源消耗小或者基本为零，而且页面加载速度也快，最主要的是提高客户浏览体验度，只要下拉列表超出设定范围将加载一批新的数据。

 

瀑布流实现原理：

   瀑布流数据加载有两种实现功能（本人只想到这两种实现的功能，也许有很好的办法，大家可以根据自己的想法去实现）第一：用数据分页实现，当打开页面时首先加载一批数据，如果超出设定范围查询下一批数据以此类推。（缺点：每加载一次数据调用一次数据查询语句，这样增加了服务器资源消耗，如果数据量很大不建议使用。）第二：数据分页+静态页面（例如：一共一万条数据，使用分页每页查询100条数据，共100页，在每页100条数据当中用瀑布流每次显示20条数据，并将其余数据每页20条生成不同静态页面，共生成4页，这样就可以实现瀑布流数据加载的效果了。）

 

源码功能简介：

   工具：mssql2000，MyEclipse（struts1.3），tomcat6.0。连接数据库底层类自己封装的大家可以替换成自己的连接数据库底层类。

   源码中涉及到的功能有：数据添加，数据查询，图片上传，压缩图片，生成静态页面 。

   注： 1.源码中将数据添加和图片上传功能合并一起，当上传图片成功后将图片信息添加到数据库中。

        2. 压缩图片（瀑布流图片宽度固定，高度不限制所以在上传图片时为了防止图片变形增加了一个图片压缩功能。）

 

数据库简介：

        库名：pbl

        表明：pblImg  字段：pblImgId(主键)，pblImgName(图片名称),pblZise(图片大小),pblType(图片类型),pblPath(图片路径，也是图片的新名称方便前台路径调用)

 

  后台类简介：

         包名：com.web.bean存放的类

              PblImg         实体bean

              PageEncoding   编码格式（可省略）

              PublicHtmlClass  辅助类，方法包含(获取项目路径和生成静态页面文件)

              ImageScale      将上传图片压缩成指定宽度（可省略）

         包名：com.web.jdbcTool存放类

               DBConnection  连接数据库（大家可以更换成简单的JDBC连接数据库）

               ObjectMapper   反射类，封装查询以后的语句（大家可以更换简单方法）

               OptTemplate     数据库具体操作封装类，包含查询，删除，修改等封装方法。

         包名：com.web.servlet

                PblDao    业务接口（包含具体的数据增，删，改，查功能）

                PblDaoImpl 业务接口实现类（具体实现PblDao接口的方法）

         包名：com.web.struts.action 存放的类

               PblAction   struts业务层，处理前台数据和底层数据交互（这里用到的是1.3版本的，大家可以修改2.0或更高的，如果是初学者可以换成servlet）

          

         dbcpConfig.Properties文件为数据库连接配置文件

大家修改如下字段：

url=jdbc:sqlserver://localhost:1433;（这里是ms2000数据库）

DatabaseName=pbl（数据库名称）

username=sa（数据库用户名）

password=sa （数据库密码，如果是空去掉sa就可以）

 

WebRoot目录介绍：

       pbl_File  瀑布流插件

       uploadFile 存放生成瀑布流静态页面文件（大家页可以写程序自动生成文件）

       uploadify  上传图片插件，这是一个jquery免费控件。(如果有需求可以给大家把上传附件的功能独立出来)

       uploadImg  存放上传图片的文件（每个上传的原始图片将对应一个压缩的图片）

 

       index.jsp页面显示瀑布流

       pblManager.jsp添加瀑布流内容。

 

以上为整个项目的大体简介，这里介绍的有点凌乱，如果大家有不明白的地方可以加我此源码为本人第一次测试瀑布流功能的，后期运用到了网站当中，大家可以先看下修改后的功能。希望可以给大家能解决瀑布流这个模块的学习。