目前互联网瀑布流的布局方式已经比比皆是,我也自己写了个东东,写的不好各位见笑了。
我的实现方法是 上传图片时候将图片大小计算出来之后和图片一并存入库中,加载时候根据需要的大小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上面的,另外有一个图片缩放的类,很简单就不贴了。
运行界面: