素材网 素材网
  • jsp瀑布流源码每次加载12个图片

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

     

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

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

     

    瀑布流实现原理:

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

     

    源码功能简介:

       工具:mssql2000MyEclipsestruts1.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添加瀑布流内容。

     

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


    jsp瀑布流源码.rar


     
@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。