前端项目练习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;width: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 值。