前端项目练习01-瀑布流练习

是我是我又是我，我要在此发誓每个工作日练一个前端小项目，并把大致思路和部分代码以及总结心得发在这里，请诸位监督，鞠躬感谢O(∩_∩)O谢谢

瀑布流设计主要是计算最小块的高度并自动填充。设计思路如下：

原生js设计：

1）分块，整体页面为一个分块，设为main.main中分成若干个cage,cage中再加入photo块，photo块中再放入图片。

<div id="main">
	<div class="cage">
		<div class="photo">
			<img src="images/0.jpg">
		</div>
	</div>	
		

2）设计css main设计为绝对定位，photo和cage设计为float:left,就能保证分行排布，photo里的img设置一下宽度，剩下的细节就自己喜欢就好。

*{
	margin:0;
	padding: 0;

}
#main{
	position: relative;
}
.cage{
	float:left;
	padding:10px;
	
}
.photo{
	border-style: solid;

	border-color: #888;
	box-shadow: 5,5,#ccc;
	border-radius: 5px;

}
.photo img{
	height: auto;
	225px;
}

3）设计js

瀑布流实现用waterfall函数，

1)已有图片的瀑布流加载

(1)在函数中首先取main,然后取cage，取cage封装成一个getByClass函数，易于维护，

(2)将cage类中所有内容取出来后首先计算一行能放多少张图片，然后将整个类遍历。一行内图片正常存高度，

(30超过一行的要采取别的措施，首先找出目前高度数组中最小高度的图片序号，然后把待加载的图片的定位设为绝对定位，

top就是直接最小图片的height,left就是头上图片的offsetleft,同时更新高度数组的最小高度。就能达成已有图片的瀑布流排列。

	window.onload=function(){
		waterfall('main','cage');

}	
	function waterfall(parent,cage){
		var oParent=document.getElementById(parent);
		var ocage=getByClass(oParent,cage);//调出cage的块
		var num=Math.floor(document.documentElement.clientWidth/ocage[0].offsetWidth);//计算一行能放多少张图片
		console.log(num);
		var hArr=[];//存放图片高度
		for(var i=0;i<ocage.length;i++){
			if(i<num){
				hArr.push(ocage[i].offsetHeight);
			}
			else{
				var minH=Math.min.apply(null,hArr);
				var n=getMinIndex(hArr,minH);
				ocage[i].style.position='absolute';
				ocage[i].style.top=minH+'px'
				ocage[i].style.left=ocage[n].offsetLeft+'px';
				hArr[n]+=ocage[i].offsetHeight;

			}

		}}

	
	function getByClass(parent,clsName){
		var pArr=new Array(),
		oEle=parent.getElementsByTagName('*');
	for(var i=0;i<oEle.length;i++)
	{
			if(oEle[i].className==clsName)
			{
				pArr.push(oEle[i]);

			}
	}
	return pArr;	
	}

function getMinIndex(parent,minh){
	for(var i in parent)
	{
		if(parent[i]==minh)
		{
			return i;
		}

	}

}

2）是鼠标滚动加载的图片：

（1）判断最后一张图片是否已滑过高度的一半。

function scrollLoad(){
		var oParent=document.getElementById('main');
		var ocage=getByClass(oParent,'cage');
		var n=ocage.length-1;
		var lastHeight=ocage[n].offsetTop+Math.floor(ocage[n].offsetHeight/2);//最后一张图片的一半高度
		var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//浏览器兼容问题

		var height=document.documentElement.clientHeight||document.body.clientHeight;//浏览器兼容问题
		return(lastHeight<scrollTop+height)?true:false;

	}

（2）生成div块自动加载。

	window.onscroll=function(){
				if(scrollLoad){
	      var oParent=document.getElementById('main');
	          for(var i=0;i<dataInt.data.length;i++)
	          {

                        //生成cage photo img

	          	var ocage=document.createElement('div');
	          	ocage.className='cage';
	          	oParent.appendChild(ocage);
	          	var opho=document.createElement('div');
	          	opho.className='photo';
	          	ocage.appendChild(opho);
	          	var oimg=document.createElement('img');
	          	oimg.src="images/"+dataInt.data[i].src;
	          	opho.appendChild(oimg);

	          }
	          waterfall("main","cage");

				}
			}

总结：

1）绝对定位和相对定位的区别

绝对定位的元素框会在文档流中消失，相当于悬在文档流上，相对定位的元素框并未消失在文档流中，位置还在，但是可以发生偏移

2）offSetHeight clientwidth 

offsetheight:返回元素的实际像素高度，包括内边框和边框。

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth   (包括边线的宽);
网页可见区域高： document.body.offsetHeight  (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;

屏幕可用工作区宽度：window.screen.availWidth;

 

3）浏览器兼容

获取scrollTop值

完美的获取scrollTop 赋值短语 

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop；

通过这句赋值就能在任何情况下获得scrollTop 值。。