jq,js,css3 分别实现瀑布流（慕课网3-10）

思路与问题：

    1、瀑布流中的图片等宽不等高,从第二行起，图片优先加载到第一行高度最短的图片下然后更新的高度

    2、图片加载的问题：a.是否还有需要加载的图片，没有就不执行添加dom元素（这里要设置每次加载几张图片）在这里可以实现加载图片不重复                    

                                      b. 滚动条往回滚动也不需要触发加载图片                    

                                      c.图片都加载完成后加上window.οnscrοll=null;来移除滚动条滚动事件

html代码：


<div id="main">
   <div class="box">
    <div class="pic">
  <img src="images/1.png" /> 
 </div>
   </div>
   <div class="box">
    <div class="pic">
  <img src="images/2.png" />
 </div>
   </div>
   <div class="box">
    <div class="pic">
  <img src="images/3.png" />
 </div>
   </div>
   <div class="box">
    <div class="pic">
  <img src="images/4.png" />
 </div>
   </div>
   <div class="box">
    <div class="pic">
  <img src="images/5.png" />
 </div>
   </div>
   <div class="box">
    <div class="pic">
  <img src="images/6.png" />
 </div>
   </div>
   <div class="box">
    <div class="pic">
  <img src="images/7.png" />
 </div>
   </div>
   <div class="box">
    <div class="pic">
  <img src="images/8.png" />
 </div>
   </div>
   <div class="box">
    <div class="pic">
  <img src="images/1.png" />
 </div>
   </div>
   <div class="box">
    <div class="pic">
  <img src="images/2.png" />
 </div>
   </div>
   <div class="box">
    <div class="pic">
  <img src="images/3.png" />
 </div>
   </div>
   <div class="box">
    <div class="pic">
  <img src="images/4.png" />
 </div>
   </div>
   <div class="box">
    <div class="pic">
  <img src="images/5.png" />
 </div>
   </div>
   <div class="box">
    <div class="pic">
  <img src="images/6.png" />
 </div>
   </div>
   <div class="box">
    <div class="pic">
  <img src="images/7.png" />
 </div>
   </div>
 </div>


js实现


<script type="text/javascript">
window.οnlοad=function(){
 waterfall('main','box');//对main下的box进行瀑‘布流
 //json:这里data是dataInt的属性，src是data的属性，调用属性时之间是 对象.属性
 var dataInt={"data":[{'src':'10.png'},{'src':'9.png'},{'src':'8.png'}]};//真正的数据应是从后台获取，这里手动模拟
 window.οnscrοll=function(){//拖动滚动条时触的函数
   if(checkScrollSide()){//如果满足触发条件，执行下列代码
    //将数据渲染到当前页面的尾部
 var oParent=document.getElementById('main');
 for(var i=0;i<dataInt.data.length;i++){
 //将完整的box创建在main中
  var oBox=document.createElement('div');
  oBox.className="box";
  oParent.appendChild(oBox);
  var oPic=document.createElement('div');
  oPic.className="pic";
  oBox.appendChild(oPic);
  var oImg=document.createElement('img');
  oImg.src="images/"+dataInt.data[i].src;//从json中获取路径
  oPic.appendChild(oImg);
 }
 waterfall('main','box');//新加载的图片并没有按waterfall排列，因此在这再次调用waterFall
   }    
 }
}
function waterfall(parent,box){
 //将main下所有class为box的元素取出
 var oParent=document.getElementById('main');
 var oBoxs=getByClass(oParent,box);
 //计算整个页面显示的列数（页面宽/box宽）
 var oBoxW=oBoxs[0].offsetWidth;//offsetWidth包括padding
 var cols=Math.floor(document.documentElement.clientWidth/oBoxW);//取整、页面可视区的宽度
 //设置main的宽度
 oParent.style.cssText="width:"+oBoxW*cols+'px';//cssText使附加的css如外联样式写法一样
 //将除第一行的图片优先加在第一行中高度最小的图片下；
 var hArr=[]//存放每一列高度的数组
 for(var i=0;i<oBoxs.length;i++){
  if(i<cols){//将第一行的图片的高度分别存入hArr
    hArr.push(oBoxs[i].offsetHeight);
  }else{//将下一个box放入第一行中高度最小的图片下；
  var minH=Math.min.apply(null,hArr);//Math.min(中间放的是一组数据，不能是数组)，Math.min.apply()可以解决数组，apply方法可以改变数组中this的指向
  var index=getMinhIndex(hArr,minH);//获取高度最小的图片的索引值
  oBoxs[i].style.cssText="position:absolute; top:"+minH+'px;'//将box定位在高度最小的图片下方
  oBoxs[i].style.left=oBoxW*index+'px';//法二：=oBoxs[index].offsetLeft+'px';
  hArr[index]+=oBoxs[i].offsetHeight;//更新一下加完新图片后的列的高度
  }
 }
}
function getByClass(parent,clsName){//根据class获取元素
 var boxArr=new Array();//定义一个数组，用来储存获取到的所有class为box的元素
 var oElements= parent.getElementsByTagName("*");//获取parent下的所有元素
 for(var i=0;i<oElements.length;i++){//对获取到的所有元素进行循环
   if(oElements[i].className==clsName){//如果有元素的class与给定的参数clsName一样
    boxArr.push(oElements[i]);//将该元素加到boxArr数组中
   }
 }
 return boxArr;
}
function getMinhIndex(arr,val){//获取arr中高为val的索引值
 for(var i in arr){
  if(arr[i]==val){
   return i;
  }
 }
}
//检测是否具备加载的条件（条件：当最后一个box出现一半时）
function checkScrollSide(){//返回一个布尔值
  var oParent=document.getElementById('main');
  var oBoxs=getByClass(oParent,'box');
  //获取最后一个box距顶端的距离（包括卷起的高度）+该box的一半高度
  var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offseHeight/2);
  //滚动条滚动的距离+可视区的高度
  var scrollTop=document.body.scrollTop||document.documentElement.scrollTop+document.body.clientHeight||document.documentElement.clientHeight;
  return (lastBoxH<scrollTop)?true:false;
}
</script>


jq实现


<script src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
  waterfall();
  var dataInt={"data":[{'src':'10.png'},{'src':'9.png'},{'src':'8.png'}]};
  $(window).scroll(function(){
    if(checkScrollSide){
   $.each(dataInt.data,function(key,value){//遍历json
     var oBox=$('<div>').addClass("box").appendTo($('#main'));//$('<div>')就表示创建一个<div></div>
  var oPic=$('<div>').addClass("pic").appendTo($(oBox));
  //此时value获取的是object对象（js原生对象），依旧不能直接用jq方法，此时value为{src:"0.jpg"}、{src:"1.jpg"}...
  $('<img>').attr('src','images/'+$(value).attr('src')).appendTo($(oPic));//$(value).attr('src')即获取value中属性为src的值
 })
 waterfall();
   }
  })
})
function waterfall(){
 var $boxs=$('#main>div');//获取id为main下的所有div
 var w=$boxs.eq(0).outerWidth();//获取box的宽（outerWidth包括padding，border）
 var cols=Math.floor($(window).width()/w);//求列数
 $('#main').width(w*cols);//设main的宽
  
 var hArr=[];
 $boxs.each(function(index,value){//$.each相当于for，遍历元素，index为遍历元素的索引，value遍历的元素得的docm对象
  var h=$boxs.eq(index).outerHeight();//获取当前高度 
  if(index<cols){//如果值小于列数
   hArr[index]=h;//并加到hArr数组中
  }else{
   var minH=Math.min.apply(null,hArr);//获取最小高度
   var minHIndex=$.inArray(minH,hArr);//$.inArray()方法：第一个参数为判断谁，第二个参数为在那个数组判断，得到最小高度的索引
   $(value).css({//value遍历的元素得的docm对象,docm对象不能使用jq方法，只有jq对象才能使用jq方法。$(value)可将docm对象转变为jq对象
          'position':'absolute', 
    'top':minH+'px',
    'left':minHIndex*w+'px'
    });
  hArr[minHIndex]+=$boxs.eq(index).outerHeight();   
  }
 })
}
function checkScrollSide(){
  var $lastBox=$("#main>div").last();
  //获取最后一个box距顶端的距离（包括卷起的高度）+该box的一半高度
  var lastBoxH=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
  //滚动条滚动的距离+可视区的高度
  var scrollTop=$(window).scrollTop()+$(window).height();
  return (lastBoxH<scrollTop)?true:false;
}
</script>


css3多栏布局实现


<style type="text/css">
*{margin:0; padding:0;}
/*column-width:设置对象每列的宽度(浏览器自动用可视区的宽除以设置的列宽)
  column-count:设置对象的列数（一般两者写其中一个即可）
  column-rule:设置对象的列与列之间边框的厚度（culumn-rule-width），样式（culumn-rule-style），颜色（culumn-rule-color）
  column-gap:设置对象列与列之间的间隙，不能是负值(当前浏览器窗口的宽/定义的列宽，再将剩余的宽平均分配，所以设置的gap不一定起作用)
  */
#main{ 
 -webkit-column-width:237px;
 -moz-column-width:237px;
 -mz-column-width:237px;
 -o-column-width:237px;
}
.box{padding:15px 0 0 15px;}
.pic{ width:200px; border:1px #ccc solid; border-radius:5px; box-shadow:0 0 5px #ccc;padding:10px;}
.pic img{ width:200px; display:block; height:auto;}
</style>