- 浏览: 133119 次
- 性别:
- 来自: 苏州
文章分类
最新评论
-
yaoweinan:
没有.....
Itext 5.4.0 生成PDF中文不报错,Adobe 不显示 -
马文涛:
我也发现这个问题了,你找到解决办法了吗?
Itext 5.4.0 生成PDF中文不报错,Adobe 不显示 -
coding1688:
博主辛苦了,也可以参考一下这篇文章:四步轻松搞定瀑布流布局ht ...
瀑布流布局个人实现 -
yaoweinan:
嘿嘿,那个只是最笨的办法,实际上是不行的,现在一般的都有sw ...
文件上传(无刷新,带进度条,带网速)下载完整 -
javazzu:
我为啥不行呢
文件上传(无刷新,带进度条,带网速)下载完整
目前互联网瀑布流的布局方式已经比比皆是,我也自己写了个东东,写的不好各位见笑了。
我的实现方法是 上传图片时候将图片大小计算出来之后和图片一并存入库中,加载时候根据需要的大小js等比计算出图片大小,将图的大小、将要呈现的大小交给服务器,服务器进行图片等比缩放之后写给浏览器。
上传这快就不写了,大家都明白。
我的jsp页面:
<?xml version="1.0" encoding="UTF-8" ?> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> <style type="text/css"> .container{ position:absolute; top:200px; text-align: center; margin: auto; } </style> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.7.1.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/waterfall.js"></script> <script type="text/javascript"> $(function(){ var waterfall=new Waterfall(4,300,"${pageContext.request.contextPath}/app/store/image/list.action",6,"container","${pageContext.request.contextPath}/app/store/image/{1}/{2}/{3}/{4}/download.action"); waterfall.load(); }); </script> </head> <body> <div class="container"></div> </body> </html>
引用的js文件:
/** * @auth: Lyon.Yao * @fun: * @date: 2012-2-14 */ function Waterfall(culomns,culomnWidth,url,pageSize,container,imgUrlTmpl){ this.culomns=culomns; this.culomnWidth=culomnWidth-20; this.container=container; this.culomnArray=new Array(0); this.url=url; this.imgUrlTmpl=imgUrlTmpl; this.pageSize=pageSize; this.totalPages=1; this.pageId=1; this.isLoading=false; var me=this; var init=function (){ var $container=$("."+me.container); var containerWidth=me.culomnWidth*me.culomns+20*me.culomns; $container.css("width",containerWidth+"px"); for(var i=0;i<me.culomns;i++){ var $div=$("<div></div>"); $div.css("width",me.culomnWidth); $div.css("float",'left'); $div.css("margin","10px"); $container.append($div); me.culomnArray.push($div); } }; var choicePosition=function(){ var position=me.culomnArray[0]; for(var i=1;i<me.culomnArray.length;i++){ var position_tmp=me.culomnArray[i]; var h1=parseFloat(position.css("height")); var h2=parseFloat(position_tmp.css("height")); if(h2<h1){ position=position_tmp; } } return position; }; var computeHight=function (w,h,toW){ var bit=h/w; return parseFloat(toW*bit+''); }; var loadNewData=function(){ me.isLoading=true; me.pageId=me.pageId+1; $.getJSON(me.url,{pageId:me.pageId,pageSize:me.pageSize}, function(data){ var count=data.count; me.totalPages=count%me.pageSize==0?count/me.pageSize:count/me.pageSize+1; $.each(data.data, function(i,item){ var imgUrl=me.imgUrlTmpl.replace("{1}",item.url); imgUrl=imgUrl.replace("{2}",item.width); imgUrl=imgUrl.replace("{3}",item.height); imgUrl=imgUrl.replace("{4}",me.culomnWidth); var date=new Date(); date.setTime(item.addTime); var $div=$("<div><div><img src='"+imgUrl+"' height='"+computeHight(item.width,item.height,me.culomnWidth)+"px' width='"+me.culomnWidth+"px'/></div><div>"+item.note+"</div><div>"+date.toLocaleString()+"</div></div>"); $div.css('display','none'); var position=choicePosition(); position.append($div); $div.fadeIn(4000); }); me.isLoading=false; }); }; this.load=function(){ me.isLoading=true; $.getJSON(me.url,{pageId:me.pageId,pageSize:me.pageSize}, function(data){ var count=data.count; me.totalPages=count%pageSize==0?count/pageSize:count/pageSize+1; $.each(data.data, function(i,item){ var imgUrl=me.imgUrlTmpl.replace("{1}",item.url); imgUrl=imgUrl.replace("{2}",item.width); imgUrl=imgUrl.replace("{3}",item.height); imgUrl=imgUrl.replace("{4}",me.culomnWidth); var date=new Date(); date.setTime(item.addTime); var $div=$("<div><div><img src='"+imgUrl+"' height='"+computeHight(item.width,item.height,me.culomnWidth)+"px' width='"+me.culomnWidth+"'/></div><div>"+item.note+"</div><div>"+date.toLocaleString()+"</div></div>"); $div.css('display','none'); var position=choicePosition(); position.append($div); $div.fadeIn(4000); }); me.isLoading=false; }); var winH = $(window).height(); $(window).scroll(function () { var pageH = $(document).height(); //页面总高度 var scrollT = $(window).scrollTop(); //滚动条top var aa =(pageH-scrollT-winH)/winH; if(!me.isLoading&&aa<0.05){ if(me.totalPages>me.pageId){ loadNewData(); }else{ me.isLoading=true; alert('没有数据了'); } } }); }; init(); }
java文件:
package com.my.springmvc.web; import java.io.ByteArrayOutputStream; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.HashMap; import java.util.Map; import javax.annotation.Resource; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServletResponse; import javax.validation.Valid; import org.springframework.stereotype.Controller; import org.springframework.validation.BindingResult; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import com.my.springmvc.entry.Image; import com.my.springmvc.service.FtpService; import com.my.springmvc.service.ImageService; import com.my.springmvc.util.ImgTool; import com.my.springmvc.web.vo.ImageVO; @Controller @RequestMapping(value="/store") public class ImageController { @Resource private ImageService imageService; @Resource private FtpService ftpService; @RequestMapping(value="/image/upload.action",method=RequestMethod.POST) public @ResponseBody Object uploadImage(@Valid ImageVO image,BindingResult bindingResult) throws IOException, Exception{ if(bindingResult.hasErrors()){ return bindingResult.getAllErrors(); } String filename=System.currentTimeMillis()+ image.getImage().getOriginalFilename().substring(image.getImage().getOriginalFilename().lastIndexOf('.')); ftpService.saveFile("image", filename,image.getImage().getInputStream()); Image img=new Image(); ImgTool.setWidthAndHeight(image.getImage().getInputStream(),img); SimpleDateFormat format=new SimpleDateFormat("yyyy-MM-dd"); img.setAddTime(System.currentTimeMillis());//format.parse(image.getAddTime()).getTime()); img.setUrl("image/"+filename); img.setNote(image.getNote()); imageService.saveImage(img); return "success"; } @RequestMapping(value="/image/list.action",method=RequestMethod.GET) public @ResponseBody Object listImages(Integer pageId,Integer pageSize){ Map<String,Object> data=new HashMap<String, Object>(0); data.put("data", imageService.list(pageId, pageSize)); data.put("count",imageService.count()); data.put("pageId", pageId); return data; } @RequestMapping(value="/image/{dir}/{name}/download.action",method=RequestMethod.GET) public void downImage(@PathVariable String dir,@PathVariable String name,HttpServletResponse response) throws Exception{ ServletOutputStream out = response.getOutputStream(); ftpService.loadFile(dir, name,out); out.flush(); out.close(); } @RequestMapping(value="/image/{dir}/{name}/{w}/{h}/{fixW}/download.action",method=RequestMethod.GET) public void downFixImage(@PathVariable String dir,@PathVariable String name,@PathVariable Integer w,@PathVariable Integer h,@PathVariable Integer fixW,HttpServletResponse response) throws Exception{ ServletOutputStream out = response.getOutputStream(); ByteArrayOutputStream bout=new ByteArrayOutputStream(); ftpService.loadFile(dir, name,bout); byte[] buf = bout.toByteArray(); buf=ImgTool.fixSize(buf, w, h, fixW); out.write(buf); out.flush(); out.close(); } }
我这里图片是存在ftp上面的,另外有一个图片缩放的类,很简单就不贴了。
运行界面:
评论
1 楼
coding1688
2013-01-16
博主辛苦了,也可以参考一下这篇文章:四步轻松搞定瀑布流布局http://www.vktone.com/articles/waterfall-layout-use-jquery-masonry.html
发表评论
-
jquery easyui 存储个人解读
2012-02-23 15:00 756这两天看了一下jquery easyui ,许多地方甚感不明 ... -
js copy
2011-12-17 09:23 1049事件源对象 event.srcElement.tag ... -
汉字转拼音
2011-09-15 15:56 1241/** * * 功能:汉字转化为拼音 * **/funct ... -
js中汉字+字母混合求长度
2011-09-09 09:14 744谁写的啊 写的太好了 简单实用 String.protot ... -
js 同步请求文件
2011-06-24 11:49 1239/* js 同步请求文件 只适合于IE */ funct ... -
js 判断是否是合法的email
2011-06-24 11:43 1289/** * 检查是否为电子邮件 * * @param {} * ... -
javascript 网页对话框 获取返回参数
2011-05-09 10:42 784<script language="javas ... -
js 简单拖动
2011-05-04 08:23 707<!DOCTYPE HTML PUBLIC &qu ... -
收藏一段js dom操作
2011-04-26 17:02 819动态插入一个div var objDiv = documen ... -
js获取url参数便易方法
2011-04-21 09:48 785String.prototype.GetValue= func ... -
ajax 浏览器支持解决
2011-04-12 16:55 704function xmlHttp() { ... -
文件上传(无刷新,带进度条,带网速)下载完整
2011-04-12 13:34 2111*该程序主要解决带进度,无刷新,带网速计算的上传功能, ... -
Ext GradPanle配置说明
2011-03-25 09:50 7151、Ext.grid.GridPanel ... -
Jquery----json
2011-03-22 21:43 983<!DOCTYPE html PUBLIC " ... -
html 禁止右键功能
2011-03-19 16:52 1206-- 禁止点击鼠标右键的四种方法 <SCRIPT LA ... -
jquery在MyEclipse提示
2011-03-02 10:32 943打开help->software center-> ... -
js获取xml文件
2011-02-19 13:54 743js获取xml文件 var xmlDoc = new Act ... -
jquery--xml
2011-01-27 16:49 797success:function(xml){ var ul= ... -
js小应用
2010-12-27 16:39 720■打开■ <input name=Button onC ... -
js打印控件使用
2010-12-27 16:10 2381关于如何实现jsp页面横向打印,去掉页眉页脚的打印,网络上有很 ...
相关推荐
jquery点击添加图片瀑布流布局代码,点击内容部分,每次都会增加图片的个数,这样的效果也是很酷炫的,一般瀑布流我们会用在企业网站的产品展示或者个人网站中的相册这块,php中文网推荐下载!
用swift写的简易的瀑布流布局,简单易用,支持多行展示,大家感兴趣的话可以去我的个人博客去看看实现过程: http://blog.csdn.net/wang631106979/article/details/53793046 如果大家觉得还行,可以去我的github上...
jQuery选项卡形式图片瀑布流布局选项卡切换效果,点击上面的选项,显示的内容以瀑布流的形式展示出来,这样的效果还是很酷炫的,可以用于个人网站上面,来显示个人相册,通过瀑布流展示出来。php中文网推荐下载!
实现效果: Metro瀑布流布局效果,这个看起来可以哦,可以一直往下看呢,效果还是挺酷炫的,在做个人网站,我觉得会用上这样的效果,展示自己的照片,应该还是不错的,php中文网推荐下载!
因为是用UICollectionView来实现瀑布流的,决定继承UICollectionViewLayout来自定义一个layout来实现一个简单瀑布流的布局,下面是需要重写的方法: 重写这个属性得出UICollectionView的ContentSize:...
折腾:瀑布流布局(基于多栏列表流体布局实现) javascript 瀑布流、各大瀑布流简析与建议 因为自己用jquery比较多,便萌生了把瀑布流做成插件的想法,图片就借用迅雷UED上的那些美图吧。先看看Demo 把代码放出来吧 ...
- 瀑布流布局使得内容展示更加动态、有序,营造良好的浏览体验。 2. **个人详情页**: - 展示用户的个人信息,如头像、昵称、个性签名等。 - 列出用户发布的所有内容,按时间顺序排列。 - 显示用户收藏的内容,方便...
2. 信息流展示:采用瀑布流布局,动态加载文章列表,实现无限滚动效果,让用户沉浸在丰富的文章内容中。 3. 文章详情查看:点击文章标题或封面图,即可进入文章详情页,查看文章的详细内容和作者信息。 4. 个性化...
瀑布流布局 | 教程文章 Free Code Camp 前端闯关教程系列 响应式开发设计 勇闯 28 个关卡学会 HTML 与 HTML5 基础| FCC 前端教程 前端编程训练与算法 TicTacToe 三子棋 实现游戏 实现电脑玩家 实现 AI Path finder...
官方介绍,RecyclerView用于在有限的窗口展现大量的数据,其实早已经有了...设置布局管理器以控制Item的布局方式,横向、竖向以及瀑布流方式。 可设置Item操作的动画(删除或者添加等) 可设置Item的间隔样式(可绘制)
KotlinMallKotlin打造完整电商APP 模块化+MVP+主流框架商品模块高仿京东APP商品分类/分类或名称搜索商品上下拉瀑布流商品列表 / Tab切换商品详情SKU出现消失动画 / SKU动态加载流式布局SKU选择联动 / 跨模块跳转...
版块页面,重构帖子列表展示方式,帖子标题下方可以显示帖子简介,美化帖子图片模式(瀑布流)左侧版块导航, 快捷实用,增加本版搜索,右侧边框聚合本版块 推荐信息,合并下级版块,推荐群组,增强网页内链;同时...
版块页面,重构帖子列表展示方式,帖子标题下方可以显示帖子简介,美化帖子图片模式(瀑布流)左侧版块导航,快捷实用,增加本版搜索,右侧边框聚合本版块 推荐信息,合并下级版块,推荐群组,增强网页内链;同时...
Android瀑布流加载图片效果实例 Android中利用ViewPager实现视图切换 Android泡泡聊天界面的源码实现 android 实现EditText震动效果 Touch Index Bar (有锤子有真相) Android数据库最基础的一个例子(本人已测试...
07 recv与recvfrom的区别及基于udp实现ntp服务 08 基于tcp实现远程执行命令 09 基于tcp实现远程执行命令测试结果 10 粘包现象 11 粘包解决方法 第31章 01 上节课复习 02 socketserver实现并发 03 socketserver模块...
分类浏览,可根据类别、子类、标签等分类浏览商品,采用瀑布流沉浸式布局,并可切换最新、最热排序。 收进杂志,采用无刷新AJAX弹窗,用户可以将任何喜欢的分享商品收进自己的某个杂志中,并附加自己的点评等; ...
(5)\\python全栈day41-50\\python全栈s3 day41;目录中文件数:10个 ├─(1) 01 python s3 day41 JS的历史以及引入方式.avi ├─(2) 02 python s3 day41 JS的基础规范.avi ├─(3) 03 python s3 day41 JS的基本数据...
Web设计进程 <br>2.1 进程需求 <br>2.2 特别的Web进程 <br>2.3 基本的Web进程模型 <br>2.3.1 修正瀑布模型 <br>2.3.2 联合应用开发模型 <br>2.4 Web站点项目的途径 <br>2.5 目标和问题 ...
Web设计进程 <br>2.1 进程需求 <br>2.2 特别的Web进程 <br>2.3 基本的Web进程模型 <br>2.3.1 修正瀑布模型 <br>2.3.2 联合应用开发模型 <br>2.4 Web站点项目的途径 <br>2.5 目标和问题 ...