瀑布流-

一、原生JS实现瀑布流

说明：瀑布流，图片（单模块）的宽度相等，高度不等。第二行第一个排在第一行高度最小的下面，如此类推。

css注意事项：父元素定位为relative因为子元素（单模块）需要是绝对定位（absolute）来确定位置

子元素的整个大小，不要使用margin，把所有宽度和高度都包括在单模块里面，且子元素要float left

js代码

window.οnlοad=function () {
    waterFall('item','main');
};



function getByClass(clsName,parent) {
    var oparent;
    var items=new Array();
    if(parent){
        oparent=parent;
    }else {
        oparent=document;
    }
    var eles=oparent.getElementsByTagName('*');
    for(var i=0;ivar minH=Math.min.apply(null,colsH);//Math.min(num1,num2,num3)但是我们是直接是数组，所以用apply（this对象，xxxx)
          /*  console.log(minH);*/
            //获取这张图片的index
            var index=getImgIndex(minH,colsH);
            //根据上述获取的值，设置这一个模块的top和left
            oitems[i].style.position="absolute";
            oitems[i].style.left=itemW*index+'px';
            oitems[i].style.top=minH+'px';
            colsH[index]+=oitems[i].offsetHeight;
            console.log(colsH[index]);
        }

    }


}
function getImgIndex(Hei,HArr) {
    for(var i=0;i 
  
css代码：
 
  
 
 
  
div,img{
    margin:0;
    padding:0;
}
#main{
    position: relative;
    margin:0 auto;

}
.item{
    float: left;
    padding:15px 0 0 15px;/*在左边和上边设置15pxpadding*/
}
.pic{
    padding:10px;
    border:1px solid #ccc;
    border-radius:5px;
    box-shadow: 0 0 5px #ccc;
}
.pic img{
    width:165px ;
    height:auto;
}
 
  
 
 
  
div,img{
            margin:0;
            padding:0;
        }
        #main{
            position: relative;
            margin:0 auto;

        }
        .item{
            float: left;
            padding:15px 0 0 15px;/*在左边和上边设置15pxpadding*/
        }
        .pic{
            padding:10px;
            border:1px solid #ccc;
            border-radius:5px;
            box-shadow: 0 0 5px #ccc;
        }
        .pic img{
            width:165px ;
            height:auto;
        }
 
  
 
 
  
html代码
 
  
 
 
  

        

            

                
            
        
 
  
二、onscroll加载数据
 
  
 
  
1）蓝条：当顶部距离最后一个单模块一半距离即====》最后模块距顶（offsetTop）+offsetHeight/2
 
  
2）黑条：浏览器底部到达最后一个单模块的中心====》滚动条滚动的距离+浏览器高度
 
  
当蓝条<黑条，即到达触发条件~可以加载新的图片
 
  
//判断是否触发加载数据的条件
function checkScroll(items,parent) {
    var oparent=document.getElementById(parent);
    var oitems=getByClass(items,oparent);
    var lastItem=oitems[oitems.length-1];
    //蓝条：当顶部距离最后一个单模块一半距离即====》最后模块距顶（offsetTop）+offsetHeight/2
    var lastItemH=lastItem.offsetTop+Math.floor(lastItem.offsetHeight/2);
    //滚动的距离
    var scrollH=document.documentElement.scrollTop||document.body.scrollTop;
    //浏览器高度
    var clientWidth=document.documentElement.clientHeight || document.body.clientHeight;

    //黑条：浏览器底部到达最后一个单模块的中心====》滚动条滚动的距离+浏览器高度
    //当蓝条<黑条，即到达触发条件~可以加载新的图片
    if(lastItemH<=(scrollH+clientWidth)){
        return true;
    }else {
        return false;
    }
}
 
  
window.οnlοad=function () {
    waterFall('item','main');
    window.οnscrοll=function (ev) {
        var dataInt={
          "data":[
              {
                "src":'0.jpg'
              },
              {
                  "src":'1.jpg'
              },
              {
                  "src":'2.jpg'
              },
              {
                  "src":'3.jpg'
              },
              {
                  "src":'4.jpg'
              },
              {
                  "src":'5.jpg'
              },
              {
                  "src":'6.jpg'
              },
              {
                  "src":'7.jpg'
              },
              {
                  "src":'8.jpg'
              }

          ]
        };
        if(checkScroll('item','main')){
            //将数据块渲染到当前页面
            var parent=document.getElementById('main');
            for(var i=0;iwaterFall('item','main');重新调用，重新瀑布流
            }
        }
    }
};
 
  
 
 
  
 
 
  
 三、jq实现瀑布流
 
  
 
 
  
 
 
  
1.获取盒子宽度：
 
  
$item.eq(0).outerWidth(),通过eq获取第1个元素，通过outerwidth()获取盒子宽度