`
yaoweinan
  • 浏览: 138509 次
  • 性别: 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
发表评论

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

相关推荐

    瀑布流布局

    5. **性能优化**：在实现瀑布流布局时，需要注意性能优化。例如，只在新内容即将进入视口时加载图片（懒加载），减少不必要的DOM操作，使用事件委托等方法降低JavaScript的运行开销。 以上就是瀑布流布局的核心原理...

    JQ 用最少代码实现瀑布流布局

    在本文中，我们将深入探讨如何使用jQuery实现瀑布流布局。首先，我们需要理解瀑布流布局的基本原理。通常，它涉及到以下几个关键步骤： 1. **计算列数**：根据页面宽度和单个元素的宽度确定可以并排放置多少个元素...

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

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

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

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

    ios瀑布流布局

    在iOS开发中，实现瀑布流布局主要有两种方式：一种是通过UIKit框架中的UICollectionView来实现，另一种是利用第三方库如SDWebImage和Masonry的组合。以下将详细讲解这两种方法。 **UIKit与UICollectionView** ...

    jQuery网格瀑布流布局插件.rar

    在“jQuery网格瀑布流布局插件.rar”中，jQuery被用来处理页面动态加载和响应式布局，使页面元素能够根据浏览器窗口大小的变化自动调整，实现流畅的滚动效果。CSS特效则负责美化网格布局，如阴影、过渡和动画，让...

    瀑布流响应式网页-html源码

    瀑布流布局通常需要自定义CSS来实现元素的定位和大小调整。CSS3中的Flexbox或Grid布局可以用来更轻松地创建这种布局，但传统方法可能使用浮动元素或绝对定位。 3. JavaScript（JS）：JavaScript是实现动态功能的...

    javascript 瀑布流布局，ajax数据加载

    在JavaScript中实现瀑布流布局，通常需要以下关键步骤： 1. **计算列数**：首先，我们需要确定页面上的列数。这通常基于浏览器窗口的宽度和每个元素的预设宽度。可以使用CSS媒体查询来适应不同的屏幕尺寸。 2. **...

    Demo.rar 底层5页demo，含首页banner轮播图，上拉刷新，下来加载，瀑布流布局，个人中心

    瀑布流布局可以利用CSS Flexbox或Grid布局实现，也可以借助jQuery Masonry等JavaScript库。 5. **个人中心**：个人中心是用户管理个人信息、设置、历史记录、收藏等的地方。通常包括头像、昵称、订单列表、消息通知...

    瀑布流布局图片展示css模板-瀑布流 图片 展示 外贸 博客 图片博客.rar

    瀑布流布局图片展示CSS模板是一种常见的网页设计技术，主要用于创建美观且动态的图像展示效果，常见于外贸网站、个人博客以及图片分享平台。这种布局方式以其独特的视觉效果，使得页面在不同屏幕尺寸下都能保持良好...

    瀑布流布局图片社交网站模板下载-瀑布流 图片 社交 蓝色 简洁 bootstrap

    此外，模板可能还包含一些定制的CSS样式和JavaScript脚本，用于实现瀑布流布局、动画效果以及与后端交互的功能。开发者在使用这个模板时，需要有一定的HTML、CSS和JavaScript基础，以便根据实际需求进行自定义和扩展...

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

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

    简单实用的jQuery响应式网格瀑布流布局插件

    总结来说，这款jQuery响应式网格瀑布流布局插件是网页设计中实现动态、美观布局的有效工具。通过结合CSS的媒体查询和jQuery的强大功能，它可以为任何网站增添现代化、适应性强的视觉体验。无论是个人项目还是商业...

    waterfall瀑布流.rar

    瀑布流布局，也被称为Masonry布局，是一种网页布局方式，常用于图片展示或者商品列表，如Pinterest网站就是这种...无论是在电子商务平台、社交媒体还是个人博客，瀑布流布局都能为用户提供舒适且具有吸引力的浏览体验。

    最小的响应式动态网格瀑布流布局js插件

    在JavaScript领域，有许多插件可以实现这种布局，其中"最小的响应式动态网格瀑布流布局js插件"很可能是指一款轻量级的解决方案，它专注于提供基本的瀑布流功能，同时具有响应式设计，能够适应不同的屏幕尺寸，确保在...

    基于JavaScript的瀑布流式网页布局的设计与实现.pdf

    瀑布流式布局已经被许多大型网站采用，如Pinterest、新浪微博微相册、百度图趣、淘宝爱逛街、蘑菇街等，许多个人网站也加入了瀑布流布局的阵营。 7. 结论 基于JavaScript的瀑布流式网页布局的设计与实现可以通过...

    黑色简单图片瀑布流布局bootstrap模板_黑色.rar

    例如，HTML文件将定义网页结构，CSS文件负责样式设计，JavaScript可能包含实现瀑布流布局的逻辑，而图片文件则是实际要展示的内容。 总结来说，这个压缩包提供的是一种专为图片展示设计的黑色Bootstrap模板，采用...

    简单实用瀑布流

    瀑布流布局，也被称为Masonry布局，是一种常用于图片展示或内容加载的网页设计模式，...通过实践和学习以上知识点，你可以创建出功能完善、用户体验良好的瀑布流布局网站，无论是在个人项目还是商业应用中都极具价值。

    黑色简单图片瀑布流布局bootstrap模板-黑色 简单 图片 瀑布流 bootstrap 手机 响应式

    总的来说，这个"黑色简单图片瀑布流布局bootstrap模板"提供了一个强大的起点，可以帮助快速构建一个专业且响应式的图片展示网站，特别适合那些希望突出作品视觉效果的个人或团队。通过理解并利用Bootstrap的核心特性...

    个人相册，瀑布流

    而CSS3的 Flexbox 和 Grid 模块也为构建瀑布流布局提供了原生支持，使得布局更为简洁高效，减少了对JavaScript的依赖。 在个人相册应用中，瀑布流设计不仅可以提供美观的视觉体验，还能够方便用户按照时间线或特定...

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