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