原生js写的瀑布流

这里只写了js和css方法，大家有兴趣可以动手写写

*{
    margin:0;
    padding:0;
}
#.container{
 position: relative;
}
.box{
    float: left;
    padding: 5px;
}
//主要是加了边框效果
.img_box{
    padding: 5px;
    border: 1px solid #cccccc;
    box-shadow: 0 0 5px #cccccc;
    border-radius: 5px;
}
img{
width: 150px;
height: auto;//高度自适应
}

 window.onload = function(){
   waterFull('container','box');
   var dataInt={'data':[{'src':'1.jpeg'},{'src':'2.jpeg'},{'src':'3.jpeg'},{'src':'4.jpeg'}]};//这里只是模拟数据库传的数据
   window.scroll = function(){
    if(checkscroll()){
      var oParent = document.getElementById('container');// 父级对象
      for(var i=0;i<dataInt.data.length;i++){
       var child = document.createElement('div'); //添加 元素节点
       child.className = 'box';//添加元素的属性名
       oParent.appendChild(child);//追加到父级对象
      for(var i=0;i<dataInt.data.length;i++){
       var child_img = document.createElement('div'); //添加 元素子节点
       child_img.className = 'img_box';
       child.appendChild(child_img);
       var img = document.createElement('img');
        img.src='images/'+dataInt.data[i].src;
         child_img.appendChild(img);
      }
      waterFull('container','box'); 
    }
   }
 }

 function waterFull(parent,pin){
   var oparent = document.getElementById(parent);
   var content = getClassObj(oparent,pin);
   var apinW = content[0].offsetWidth;//获取到图片的宽度
   var num = Math.floor(document.documentElement.clientWidth/apinW)//这里也可以使用document.body.clientWidth（涉及到兼容性问题）， Math.floor向下取整
   oparent.style.cssText='width:'+apinW*num+'px;margin:0 auto;';
   var imagesArry = [];//图片高度集合
   for(var i=0;i<content.length;i++){
    var apinH = content[i].offsetHeight;
    if(i<num){
       imagesArry[i] = apinH;//拿到第一行每个图片的高度
    }else{
        var minH=Math.min.apply(null,imagesArry);//拿到数组imagesArry中的最小值minH
        var minHIndex=getminHIndex(imagesArry,minH);
        //给后面的图片依次排到每一行最小高度的盒子下面
        content[i].style.position = 'absolute';
        content[i].style.top = minH+'px';
        content[i].style.left = content[minHIndex].offsetLeft+'px';
        imagesArry[minHIndex]+=content[i].offsetHeight;//更新添加了图片后的列高
    }
   }
 }

//获取到所有图片，并放在一个数组中
 function getClassObj(parent,className){
    var obj=parent.getElementsByTagName('*');//获取 父级的所有子集
    var pinS=[];//创建一个数组 用于收集子元素
    for(var i= 0;i<obj.length;i++){
      if(obj[i].className==className){
        pinS.push(obj[i]);
      }
    };
    return pinS;
 }


//获取最小高度图片的下角标
function getminHIndex(arry,min){
    for(var i= 0;i<arry.length;i++){
      if(arry[i]==min){
        return i;
      }
    };
    return pinS;
 }

//判断何时该加载图片资源了
 function checkscroll(){
   var oParent=document.getElementById('container');
   var content = getClassObj(oparent,'box');
   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性
   var documentH=document.documentElement.clientHeight;//页面可视高度
   var lastpinH = content[content.length-1].offsetTop;
   if(lastpinH<scrollTop+documentH){
     return true
   }
   else{
    return false
   }

 }