是我是我又是我，我要在此发誓每个工作日练一个前端小项目，并把大致思路和部分代码以及总结心得发在这里，请诸位监督，鞠躬感谢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 值。。