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">< ...

随机推荐

为什么要使用自增ID作为主键
1.从业务上来说在设计数据库时不需要费尽心思去考虑设置哪个字段为主键.然后是这些字段只是理论上是唯一的,例如使用图书编号为主键,这个图书编号只是理论上来说是唯一的,但实践中可能会出现重复的情况.所 ...
一次显式GC导致的High CPU问题处理过程（转）
项目现场反馈系统出现性能问题,具体表现为:所有的客户端响应极其卡顿. 第一反应推测,难道是DB层面出现阻塞?检查v$session会话状态及等待类型未见异常,应该可以排除DB层面原因导致的可能. 继续 ...
mysql core文件的正确打开姿势
最近两天自己负责的一个实例频繁出现crash的情况,分析了日志,大致明白了crash的原因,但是没有定位到具体的SQL,也没有找到很好的规避的办法,因此想在mysql出现crash的时候自动 ...
面试10大算法汇总——Java篇
问题导读 1 字符串和数组 2 链表 3 树 4 图 5 排序 6 递归 vs 迭代 7 动态规划 8 位操作 9 概率问题 10 排列组合 11 其他 -- 寻找规律英文版以下从Java角度解释 ...
活动窗口(Active)，焦点窗口(Focus)和前景窗口(Foreground)之间的关系
活动窗口(Active),焦点窗口(Focus)和前景窗口(Foreground)之间的关系任何一个时候,我们的Windows桌面上总有一个最前台的窗口,其实说简单的,就是标题栏变成深蓝色的那个窗口 ...
使用ServiceStack缓存技术
ServiceStack 是一个高性能的 .NET Web 服务框架,简化了开发 XML.JSON.JSV 和 WCP SOAP Web 服务.它定义了符合 Martin Fowlers 数据传输对象 ...
【Python之路】第十八篇--MySQL（一）
一.概述 1.什么是数据库 ? 答:数据的仓库. 2.什么是 MySQL.Oracle.SQLite.Access.MS SQL Server等 ? 答:他们均是一个软件,都有两个主要的功能: a. ...
table width 决定 td width
w td width 有无在chrome edge ff 均未影响td实际宽度,td接近等比分配table width. <!doctype html> <html lang=&qu ...
fun_action
make an absolute URI from a relative one http://php.net/manual/en/function.header.php <?php /* Re ...
转！！关于java类初始化顺序
原文地址:http://www.cnblogs.com/luckygxf/p/4796955.html 1.没有继承静态变量->静态初始化块->变量->变量初始化块->构造方 ...

javascript-实现简单瀑布流

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

随机推荐

热门专题