javascript-实现简单瀑布流

直接上代码：

<style>

*{

	margin:0;

	padding:0;

}

.waterfall_item{

	border:solid 3px #ccc;

	box-shadow:1px 1px 3px #eee;

	border-radius:8px;

	font:normal 12px/22px 'Microsoft yahei';

	text-align: center;

	padding: 20px 0;

	overflow: hidden;

}

</style>

<script>

/**

	瀑布流

	分析：

		瀑布流主要解决各个列的各元素的位置，以及各列的高度问题

*/

/**

	瀑布流

	分析：

		瀑布流主要解决各个列的各元素的位置，以及各列的高度问题

	确定一行有几列，每个元素之间的间隔大小。

	获取各元素的高度，添加到面板，并确定每列的高度

	属性：

		panel//画板

		items//要加载的项目

		colNum//列数

		col=[]//列数组

		colLeft// 左间距

		colTop// 上间距

	方法:

		init//初始化

		refresh//刷新

		setColNum//设置列数

		setColLeft//设置左间距

		setColTop//设置上间距

		paint//添加到外框

		refreshPanel//更新外部画板

*/

function getStyle(o,name){

	if(document.defaultView&&document.defaultView.getComputedStyle)

		return document.defaultView.getComputedStyle(o,null)[name];

	else

		return o.currentStyle[name];

}

function waterfall(opts){

	this.init(opts);

}

waterfall.prototype={

	constructor:waterfall,

	init:function(opts){

		this.panel=opts.panel||document.body;//画板

		this.items=opts.items||[];//要加载的项目

		this.colNum=opts.colNum||3;//列数

		this.colLeft=opts.colLeft||5;//左间距

		this.colTop=opts.colTop||5;// 上间距

		this._updated=false;

		this.col=[];

		this.initCol();

		this.newItems=this.items;

		this.draw(this.newItems);

	},

	initCol:function(){

		//初始化列数组

		for(var i=0,len=this.colNum;i<len;i++){

			this.col[i]={

				height:0,//高度

				itemNum:0,//项目数

				idx:i,

				count:0

			}

		}

	},

	refresh:function(type){

		var items;

		if(this._updated){

			if(type!=='append'){

				this.initCol();

				this.panel.innerHTML='';

				items=this.items;

			}else{

				items=this.newItems;

			}

			this.draw(items);

		}

	},

	_setUpdate:function(updated){

		if(this._updated!=updated){

			this._updated=updated;

		}

	},

	setColNum:function(num){

		if(num==this.colNum)return;

		this._setUpdate(true);

		this.colNum=num;

	},

	setColLeft:function(leftSpan){

		this._setUpdate(true);

		this.colLeft=leftSpan;

	},

	setColTop:function(topSpan){

		this._setUpdate(true);

		this.colLeft=leftSpan;

	},

	addItems:function(items){

		this._setUpdate(true);

		this.items=this.items.concat(items);

		this.newItems=items;

	},

	draw:function(items){

		var that=this,

			i=0,

			p=this.panel,

			len=items.length;

		for(;i<len;i++){

			var r=Math.floor(i/this.colNum);

			var w=parseInt(getStyle(p,'width'))/this.colNum-this.colLeft;

			var curCol=this.getMinHeightCol();

			var c=curCol.idx;

			var t=curCol.height+this.colTop;

			var l=c*(w+this.colLeft)+this.colLeft;

			var oitem=this.createItem(w,l,t,items[i]);

			p.appendChild(oitem);

			var itemH=oitem.offsetHeight;

			curCol.height=curCol.height+itemH+this.colTop;

			curCol.count++;

			p.style.height=curCol.height+'px';

		}

	},

	createItem:function(w,l,t,html){

		var oitem=document.createElement('div');

		oitem.innerHTML=html;

		oitem=oitem.firstChild;

		oitem.style.position='absolute';

		oitem.style.width=w+'px';

		oitem.style.left=l+'px';

		oitem.style.top=t+'px';

		return oitem;

	},

	getMinHeightCol:function(){

		var idx=0,minner=this.col[idx].height;

		for(var i=0,len=this.colNum;i<len;i++){

			if(minner>this.col[i].height){

				minner=this.col[i].height;

				idx=i;	

			}

		}

		return this.col[idx];

	}

}

</script>

<div style="margin:0 auto">列：<input type="text" value='3' id="col_num" /><button id="refresh">刷新</button></div>

<div id="response_flow" class="response_flow"  style="width:1000px;position:relative;">

</div>

<script>

//测试用例

var items=[

		   "<div class='waterfall_item'><img src='http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg' height='100' style='height:100px;' /><br />asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'>asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'><img src='http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg' height='200' style='height:200px;' /><br />asdfasdfasdf</div>",

		   "<div class='waterfall_item'><img src='http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg' height='100' style='height:100px;' /><br />asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'>asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'><img src='http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg' height='200' style='height:200px;' /><br />asdfasdfasdf</div>",

		   "<div class='waterfall_item'><img src='http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg' height='100' style='height:100px;' /><br />asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'>asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'><img src='http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg' height='200' style='height:200px;' /><br />asdfasdfasdf</div>",

		   "<div class='waterfall_item'><img src='http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg' height='100' style='height:100px;' /><br />asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'>asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'><img src='http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg' height='200' style='height:200px;' /><br />asdfasdfasdf</div>",

		   "<div class='waterfall_item'><img src='http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg' height='100' style='height:100px;' /><br />asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'>asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'><img src='http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg' height='200' style='height:200px;' /><br />asdfasdfasdf</div>",

		   "<div class='waterfall_item'><img src='http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg' height='100' style='height:100px;' /><br />asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'>asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'><img src='http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg' height='200' style='height:200px;' /><br />asdfasdfasdf</div>",

		    "<div class='waterfall_item'><img src='http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg' height='100' style='height:100px;' /><br />asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'>asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'><img src='http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg' height='200' style='height:200px;' /><br />asdfasdfasdf</div>",

		   "<div class='waterfall_item'><img src='http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg' height='100' style='height:100px;' /><br />asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'>asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'><img src='1.jpg' height='200' style='height:200px;' /><br />asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>"

		  ]

var colNum;

var refreshBtn=document.getElementById('refresh');

var panel=document.getElementById('response_flow');

var flow=new waterfall({

					   panel:panel,

					   items:items,

					   colLeft:20,

					   topLeft:20

					  })

//追加

var newItems=[

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'><img src='http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg' height='200' /><br />asdfasdfasdf</div>",

		   "<div class='waterfall_item'><img src='http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg' height='100' /><br />asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'>asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'><img src='http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg' height='200' /><br />asdfasdfasdf</div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>",

		   "<div class='waterfall_item'>asdfasdfasdf<br />asdfasdfasdf<br /></div>"

];

refreshBtn.onclick=function(){

	colNum=document.getElementById('col_num').value;

	flow.setColNum(colNum);

	flow.refresh();

}

var toop=200;

var loadNum=1;

var maxNum=5;

var originTop=document.body.scrollHeight-document.documentElement.clientHeight;

window.onscroll=function(){

	var to=document.body.scrollTop;

	if(loadNum>maxNum)return;

	if(to>loadNum*toop){

		loadNum++;

		flow.addItems(newItems)

		flow.refresh('append')

	}

}

window.onresize=function(){

	flow._setUpdate(true);

	flow.refresh();

}

</script>

效果见：

javascript-实现简单瀑布流的更多相关文章

iOS之简单瀑布流的实现
iOS之简单瀑布流的实现前言超简单的瀑布流实现,这里说一下笔者的思路,详细代码在这里. 实现思路 collectionView能实现各中吊炸天的布局,其精髓就在于UICollectionVie ...
jquery实现简单瀑布流
瀑布流这个概念一直不是很理解,看到别人可以实现,自己弄了很久还是不能实现就很纠结.瀑布流这根刺就一直扎在我心里,一次偶然的机会看到别人实现了瀑布流,我想我是不是也应该再继续把这个未完成的任务画一个圆满 ...
WPF下制作的简单瀑布流效果
最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...
JavaScript：实现瀑布流
一.前言: 瀑布流现在是一个非常常用的布局方式了,尤其在购物平台上,例如蘑菇街,淘宝等等. 二.流程: 1.在html文件中写出布局的元素内容: 2.在css文件中整体对每一个必要的元素进行样式和浮动 ...
jquery实现简单瀑布流代码
测试环境:ie8 ff13.0.1 chrome22 可以将分页获取的内容依次填入四个div中,瀑布流的分页可以以多页(比如5页)为单位二次分页,这样可以减少后台算法的复杂度 <!DOCTYP ...
Jquery简单瀑布流代码示例
最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...
用原生JavaScript实现图片瀑布流的浏览效果
学习JS,活跃思维,灵活运用的一个较为典型的学习案例.同一个瀑布流的效果但实现方式却很多,利用递归.冒泡等等手法都可以达到你想要的目的.这次要说的就是利用类似递归来实现此效果的原创方案.此方案个人认为 ...
从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流
未完待续...... 一.运动原理通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...
thinphp下拉获取更多瀑布流效果
html页面 <body> <script type="text/javascript" src="jquery.min.js">< ...

随机推荐

Microsoft Visual C++ 2005 Redistributable---win下安装软件“嘭”的一声报错！
今天下了个MindManager,正准备安装结果出现了如题的错误提示!!! 于是百度/google一下,在权威的微软官网下找到了答案,他妈的,看了之后表示很无奈 If the non unicode ...
SurvivalShooter学习笔记（八.敌人管理器）
敌人管理器:管理敌人的随机出生点创建在场景中建立几个空物体,作为敌人的出生点 public class EnemyManager : MonoBehaviour { public PlayerHea ...
JAVA大数（转）
1.输入首先要想输入需要先包括: import java.util.*; 我们需要其中的 Scanner类声明的对象来扫描控制台输入. 针对A+B来说: import java.util.*; pu ...
tomcat登录账户配置
tomcat7和tomcat6的用户信息配置有些不一样,tomcat7中添加了manager=gui和admin-gui角色,配置参考如下: 再 tomcat 文件夹的conf文件夹中的 tomcat ...
php 问题及原因总结
1.php 加水印时出现问题的原因 :或许某个参数输入错误,导致页面一点反应都没有.
work_log
机房搬迁 1. 虚拟机-à实体机 2. ldap 服务器 3. 考勤数据服务器 4. glpi 权限管理. 5. 备份脚本. 6. 试验jira重新启动. Luke--- 1,报价文档,相关技术者,技 ...
flannel源码分析---初始化部分
// main.go 1.func main() ..... 首先调用sm, err := newSubnetManager()创建subnet manager .... 调用ctx, cancel ...
mysql分组取每组前几条记录(排名)
1.创建表 create table tb( name varchar(10), val int, memo varchar(20) ); 2.插入数据 insert into tb values(' ...
python多线程的两种写法
1.一般多线程 import threading def func(arg): # 获取当前执行该函数的线程的对象 t = threading.current_thread() # 根据当前线程对象获 ...
（4.9）SQL Server 数据库规范
SQL Server 数据库规范一. 命名规范常用对象命名规范,使用帕斯卡命名法(Pascal,单词首字母大写),统一使用英文. 1. 表.英文单数名词,尽量写完整单词名 ...

javascript-实现简单瀑布流

javascript-实现简单瀑布流的更多相关文章

随机推荐

热门专题