JS实现的瀑布流

js实现的瀑布流

1. HTML和CSS的布局

首先用HTML和CSS实现瀑布流的布局：如下图，为了让js可以获得盒子offsetleft等最好让盒子使用padding分开之间的距离，首先图片外面得有两层盒子，内层用来设置大盒子与图片之间的距离（给pic设置padding），外层用来设置每个图片大盒子之间的距离（给box设置padding-left和padding-top）。当然这两层盒子的大小是相同的，为了让盒子美观可以给pic设置一些CSS3的属性（box-shadow，border等）。 最后让所有的图片大盒子（box）都浮动起来，以保证，因为js加上的图要用到绝对定位所以还需要给容纳box的盒子main设置相对定位。

HTML

CSS

2.JS设计

1. 瀑布流函数

• 找到所有的box盒子（比较类名）
• 计算一行图片盒子box的数目：一行(box盒子)图片的数目=Math.floor(屏幕宽度/box图片宽度)
• 给main盒子设置宽度，设置了以后才可以使其居中：main的宽度 =box图片的数目*box图片的宽度
• 创建一个新的数组，存储第一行box的高度
• 保存最小高度（第一行图片高度最小值就是最小高度），并且找到它的索引号（用一个函数，比较第一行的高度值哪一个和最小高度值一样，一样则return索引号）
• 给接下来的图片设置绝对定位使它在第一行高度最小的下面，并且增加设置后那一行的高度。

function waterfall(main,box){
					var main=document.getElementById(main);
					var all=main.getElementsByTagName("*");
					var boxArr=[];   //找到classname为box的盒子    存放box
					var width=0;
					for (var i=0;i可以使main居中
						main.style.width=boxNum*boxArr[0].offsetWidth+"px";
						width=boxArr[0].offsetWidth;
					}
					//创建一个新的数组，存储第一行box的高度
					var boxHeight=[];
					for (var i=0;i

2. 下拉事件

用一个数组存储接下来图片的路径，在下拉事件里面首先判断图片是否需要加载（当最下面一行图的一半出来时），需要返回true，不需要返回false。当需要加载时新创建box盒子插入到main里面并且设置类名，再创建pic盒子插入新建的box盒子里面，设置类名，再创建img插入到新建的pic盒子里面，并且给img添加图片大小，和图片宽度（所有图片等宽）最后进行瀑布流函数。

			window.οnlοad=function(){
				waterfall("main","box");//瀑布流函数
				//下拉事件
				var dataInt={"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'}]};
				window.οnscrοll=function(){
					if(check()){
						var main=document.getElementById("main");
						for(var i=0;i

3. 关于client和scroll的兼容

//检测scroll
				function scroll(){
					if(window.pageXOffset!=null){
						return{
							top: window.pageYOffset,
							left: window.pageXOffset
						}
					}
					else if(document.compatMode=="CSS1compat"){
						return{
							top: document.documentElement.scrollTop,
							left: document.documentElement.scrollLeft
						}
					}
					return{
						top: document.body.scrollTop,
						left: document.body.scrollLeft
					}
				}
			//检测屏幕宽度的函数
				function client(){
						if(window.innerWidth!=null){
							return{
								width: window.innerWidth,
								height: window.innerHeight
							}
						}
						else if(window.compatMode=="CSS1compat"){
							return{
								width: window.documentElement.width,
								height: window.documentElement.height
							}
						}
						else{
							return{
								width: window.body.width,
								height: window.body.height
							}
						}
				}

3. 瀑布流完成：