`
yaoweinan
  • 浏览: 132674 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

瀑布流布局个人实现

 
阅读更多

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

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

运行界面：


  • 大小: 2.8 MB
分享到：
| ftp文件上传 、下载
评论
1 楼 coding1688 2013-01-16  
博主辛苦了，也可以参考一下这篇文章：四步轻松搞定瀑布流布局http://www.vktone.com/articles/waterfall-layout-use-jquery-masonry.html
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery点击添加图片瀑布流布局代码.zip

    jquery点击添加图片瀑布流布局代码，点击内容部分，每次都会增加图片的个数，这样的效果也是很酷炫的，一般瀑布流我们会用在企业网站的产品展示或者个人网站中的相册这块，php中文网推荐下载！

    ios-简易的瀑布流布局.zip

    用swift写的简易的瀑布流布局，简单易用，支持多行展示，大家感兴趣的话可以去我的个人博客去看看实现过程： http://blog.csdn.net/wang631106979/article/details/53793046 如果大家觉得还行，可以去我的github上...

    jQuery选项卡形式图片瀑布流布局选项卡切换效果.zip

    jQuery选项卡形式图片瀑布流布局选项卡切换效果，点击上面的选项，显示的内容以瀑布流的形式展示出来，这样的效果还是很酷炫的，可以用于个人网站上面，来显示个人相册，通过瀑布流展示出来。php中文网推荐下载！

    Metro瀑布流布局效果.zip

    实现效果： Metro瀑布流布局效果,这个看起来可以哦，可以一直往下看呢，效果还是挺酷炫的，在做个人网站，我觉得会用上这样的效果，展示自己的照片，应该还是不错的，php中文网推荐下载！

    iOS自定义UICollectionViewLayout实现瀑布流布局

    因为是用UICollectionView来实现瀑布流的，决定继承UICollectionViewLayout来自定义一个layout来实现一个简单瀑布流的布局，下面是需要重写的方法： 重写这个属性得出UICollectionView的ContentSize：...

    Jquery瀑布流插件使用介绍

    折腾:瀑布流布局（基于多栏列表流体布局实现） javascript 瀑布流、各大瀑布流简析与建议 因为自己用jquery比较多，便萌生了把瀑布流做成插件的想法，图片就借用迅雷UED上的那些美图吧。先看看Demo 把代码放出来吧 ...

    仿小红书前端设计的网页 html css js

    - 瀑布流布局使得内容展示更加动态、有序,营造良好的浏览体验。 2. **个人详情页**: - 展示用户的个人信息,如头像、昵称、个性签名等。 - 列出用户发布的所有内容,按时间顺序排列。 - 显示用户收藏的内容,方便...

    微信小程序Demo-热门文章信息流-附完整源代码.rar

    2. 信息流展示：采用瀑布流布局，动态加载文章列表，实现无限滚动效果，让用户沉浸在丰富的文章内容中。 3. 文章详情查看：点击文章标题或封面图，即可进入文章详情页，查看文章的详细内容和作者信息。 4. 个性化...

    frontend-tutorials::blue_book: Frontend Tutorials and Tricks — 前端技巧和教程

    瀑布流布局 ｜ 教程文章 Free Code Camp 前端闯关教程系列 响应式开发设计 勇闯 28 个关卡学会 HTML 与 HTML5 基础｜ FCC 前端教程 前端编程训练与算法 TicTacToe 三子棋 实现游戏 实现电脑玩家 实现 AI Path finder...

    recyclerViewDemo

    官方介绍，RecyclerView用于在有限的窗口展现大量的数据，其实早已经有了...设置布局管理器以控制Item的布局方式，横向、竖向以及瀑布流方式。 可设置Item操作的动画（删除或者添加等) 可设置Item的间隔样式（可绘制）

    KotlinMall:Kotlin打造完整电商APP 模块化+MVP+主流框架

    KotlinMallKotlin打造完整电商APP 模块化+MVP+主流框架商品模块高仿京东APP商品分类/分类或名称搜索商品上下拉瀑布流商品列表 / Tab切换商品详情SKU出现消失动画 / SKU动态加载流式布局SKU选择联动 / 跨模块跳转...

    discuz模板 梦想 Dream GBK+UTF8 v1.0 商业版dz模板.rar

    版块页面，重构帖子列表展示方式，帖子标题下方可以显示帖子简介，美化帖子图片模式（瀑布流）左侧版块导航， 快捷实用，增加本版搜索，右侧边框聚合本版块 推荐信息，合并下级版块，推荐群组，增强网页内链；同时...

    头条报道 GBK v1.1.rar

    版块页面，重构帖子列表展示方式，帖子标题下方可以显示帖子简介，美化帖子图片模式（瀑布流）左侧版块导航，快捷实用，增加本版搜索，右侧边框聚合本版块 推荐信息，合并下级版块，推荐群组，增强网页内链；同时...

    android开发资料大全

    Android瀑布流加载图片效果实例 Android中利用ViewPager实现视图切换 Android泡泡聊天界面的源码实现 android 实现EditText震动效果 Touch Index Bar （有锤子有真相） Android数据库最基础的一个例子（本人已测试...

    python入门到高级全栈工程师培训 第3期 附课件代码

    07 recv与recvfrom的区别及基于udp实现ntp服务 08 基于tcp实现远程执行命令 09 基于tcp实现远程执行命令测试结果 10 粘包现象 11 粘包解决方法 第31章 01 上节课复习 02 socketserver实现并发 03 socketserver模块...

    YiiPiN社会化电商分享系统 v1.3.zip

    分类浏览，可根据类别、子类、标签等分类浏览商品，采用瀑布流沉浸式布局，并可切换最新、最热排序。 收进杂志，采用无刷新AJAX弹窗，用户可以将任何喜欢的分享商品收进自己的某个杂志中，并附加自己的点评等; ...

    老男孩第三期Python全栈开发视频教程 零基础系统学习Python开发视频+资料

    (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设计大全

    Web设计进程 &lt;br&gt;2.1 进程需求 &lt;br&gt;2.2 特别的Web进程 &lt;br&gt;2.3 基本的Web进程模型 &lt;br&gt;2.3.1 修正瀑布模型 &lt;br&gt;2.3.2 联合应用开发模型 &lt;br&gt;2.4 Web站点项目的途径 &lt;br&gt;2.5 目标和问题 ...

    WEB设计大全(part2)

    Web设计进程 &lt;br&gt;2.1 进程需求 &lt;br&gt;2.2 特别的Web进程 &lt;br&gt;2.3 基本的Web进程模型 &lt;br&gt;2.3.1 修正瀑布模型 &lt;br&gt;2.3.2 联合应用开发模型 &lt;br&gt;2.4 Web站点项目的途径 &lt;br&gt;2.5 目标和问题 ...

Magicbox
Global site tag (gtag.js) - Google Analytics