照片瀑布流效果（js，jquery分别实现与知识点总结）

来源：互联网发布：windows update是什么编辑：程序博客网时间：2024/06/05 22:34

看了慕课网的瀑布流教程，自己跟着写了遍，然后总结了下知识点

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script type="text/javascript" src="jquery-1.8.3.min.js"/></script><script type="text/javascript" src="script2.js"/></script><title></title><style type="text/css">    *{padding: 0;margin:0;}    #main{      margin-top: 10px;        position: relative;    }    .pin{        margin:0;        padding:0 0 5px 3px;        float:left;    }    .box{        padding: 10px 5px 0 5px;        border:1px solid #ccc;        box-shadow: 0 0 6px #ccc;        border-radius: 5px;    }    .box img{        border:0;        margin:0;        width:200px;        height:auto;    }</style></head><body><div id="main">    <div class="pin">        <div class="box">            <img src="images/1.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/2.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/3.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/4.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/5.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/6.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/7.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/8.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/9.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/1.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/2.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/3.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/4.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/5.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/6.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/7.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/8.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/9.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/1.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/2.jpg"/>        </div>    </div>    <div class="pin">        <div class="box">            <img src="images/3.jpg"/>        </div>    </div></div></body></html>

用js实现部分：

window.onload=function(){waterfall('main','box'); var dataimg={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'},{'src':'6.jpg'},{'src':'7.jpg'},{'src':'8.jpg'},{'src':'9.jpg'}]};        window.onscroll=function()    {        if(checkscrollside())        {            var main= document.getElementById('main');            for(var i=0;i<dataimg.data.length;i++)            {                var pin=document.createElement('div');                 pin.className='pin';                                  main.appendChild(pin);                              var box=document.createElement('div');                box.className='box';                pin.appendChild(box);                var img=document.createElement('img');                img.src='images/'+dataimg.data[i].src;                box.appendChild(img);            }            waterfall('main','box');        };    }}function  $$(clsName,ele)  {      //如果当前浏览器支持通过类名获取元素，直接返回      if(document.getElementsByClassName)      {          return(ele||document).getElementsByClassName(clsName);      }      else      {          //尽量把这些量存放在变量中，否则          //例如循环不用len，而用nodes.length，会每一次循环都遍历一次          var nodes=(ele||document).getElementsByTagName("*"),          eles=[],          len=nodes.length        i,          j,          currNode,          clsNames,          clsLen;          for(i=0;i<len;i++)          {              currNode=nodes[i];              clsNames=currNode.className.split(' ');              clsLen=clsNames.length;              for(j=0;j<clsLen;j++)              {                  if(clsNames[j]==clsName)                  {  eles.push(currNode);                      break;                  }              }          }          return eles;      }}//知识点一：js中通过属性offset--等，但padding,margin等只能获取在内联html中有的样式，//因此，下面这个函数是获取css样式的通用函数。var getStyle = function(dom, attr){  return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr];}    function waterfall(parent,box){    var main=document.getElementById(parent);    var boxes=$$(box,main);          var pins=$$('pin',main);    //console.log(boxes.length);         var pinw=pins[0];    var boxw=boxes[0].offsetWidth+parseInt(getStyle(pinw,'paddingLeft'));        console.log(boxes[0].clientWidth);    //console.log(boxw+','+main.clientWidth+','+main.offsetWidth+','+getStyle(boxes[0],'margin'));    var cols=Math.floor(document.documentElement.clientWidth/boxw);          console.log(cols);    main.style.width=cols*boxw+'px';    var boxesh=[];    for(var i=0;i<boxes.length;i++){    if(i<cols){    boxesh.push(boxes[i].offsetHeight+parseInt(getStyle(pinw,'paddingBottom')));    }    else{    var minh=Math.min.apply(null,boxesh);    var index=getMinIndex(boxesh,minh);    boxes[i].style.position='absolute';    boxes[i].style.top=minh+'px';    boxes[i].style.left=index*boxw+'px';    boxesh[index]+=boxes[i].offsetHeight+parseInt(getStyle(pinw,'paddingLeft'));    }    }    }    function getMinIndex(arr,val){    for(var i=0;i<arr.length;i++){    if(arr[i]==val)    return i;    }    }    function checkscrollside(){    var main=document.getElementById('main');    var aPin=$$('pin',main);    console.log(aPin.length);    var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;    var documentH=document.documentElement.clientHeight;//页面高度    return (lastPinH<scrollTop+documentH)?true:false;}

用jquery实现部分：

//知识点一：jquery事件绑定$(window).on('load',function(){waterfall();var dataimg={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'},{'src':'6.jpg'},{'src':'7.jpg'},{'src':'8.jpg'},{'src':'9.jpg'}]};$(window).on('scroll',function(){if(checkScrollSlide()){//知识点二：数组遍历//知识点三：value参数是DOM对象$.each(dataimg.data,function(key,value){//知识点四：创建DOM元素，不需要createElement('div');//知识点五：为元素绑定class，不再是className='';//知识点六：往元素中填充元素，不再是obj.appendChild(obj);//知识点七：属性的获取和设置，可以直接用attr (注意这是针对jquey对象的方法)；var oBox=$('<div>').addClass('pin').appendTo($('#main'));var oPic=$('<div>').addClass('box').appendTo($(oBox));$('<img>').attr('src','images/'+value.src).appendTo($(oPic));})waterfall();}})})function waterfall(){var $boxs=$('#main>.pin');//知识点八：jquery中的outerWidth(false)方法==js中的offsetWidth属性//innerWidth()==clientWidth;//width()==width;var w=$boxs.eq(0).outerWidth(false);//console.log(w);var cols=Math.floor($(window).width()/w);//知识点九：jquery可以直接css(),js是obj,style.margin:  ect;$('#main').width(cols*w).css('margin','10px auto');var hArr=[];//注意，这儿value是DOM对象$boxs.each(function(index,value){var h=$boxs.eq(index).outerHeight(false);if(index<cols){hArr.push(h);}else{var minH=Math.min.apply(null,hArr);//知识点十：jquey中直接封装了一个数组中找取某个值对应下标的方法var minHIndex=$.inArray(minH,hArr);$(value).css({'position':'absolute','top':minH+'px','left':minHIndex*w+'px',});hArr[minHIndex]+=$boxs.eq(index).outerHeight(false);}})//console.log(hArr);}function checkScrollSlide(){//知识点十一：可以直接last()方法获取最后一个元素var $lastBox=$('#main>div').last();//知识点十二：js中的一系列offsetTop等属性，变成了jquey中的offset().top  ect;var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight(false)/2);var scrollTop=$(window).scrollTop();var documentH=$(window).height();return (lastBoxDis<scrollTop+documentH)?true:false;}