飞瀑流布局个人实现 _Web前端

瀑布流布局个人实现

目前互联网瀑布流的布局方式已经比比皆是，我也自己写了个东东，写的不好各位见笑了。

我的实现方法是上传图片时候将图片大小计算出来之后和图片一并存入库中，加载时候根据需要的大小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上面的，另外有一个图片缩放的类，很简单就不贴了。

运行界面：