一聚教程网:一个值得你收藏的教程网站

最新下载

JS怎么实现简单的瀑布流加载图片效果

时间:2017-04-25 00:00:00 编辑:简简单单 来源:转载

原理是:

1.设定一行中的列数;

2.取第一行中每一个div的高度并把每一个高度放进一个数组中;

3.算出数组中最小高度的index值;

4.把第二行的第一个div放到最小高度的div的下方并把重新算出的高度值放进数组中,重新计算最小高度的index值;

5.以此类推实现多栏布局的瀑布流效果;

6.如果最后一张div的高度已滚动出现在底部时创建新的div添加到最后一张的后面,不断循环以达到加载效果;接下来代码实现。

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

    

      

        JS怎么实现简单的瀑布流加载图片效果

      

    

  

*{padding: 0;margin: 0;}

#main{

  width: 1000px;

  margin: 0 auto;

  position: relative;

}

.box{

  display: inline-block;

  float: left;

  padding: 10px 0 0 10px;

}

.Pic{

  border: 1px#ccc solid;

  padding: 10px;

  border-radius: 8px;

}

.Pic img{

  width: 162px;

}

js代码:

<script>

window.onload=function(){

waterFall('main','box');

vardataInt={

"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"}]

};

/*滚动条滚动时触发的事件*/

window.onscroll=function(){

if(checkIsSlide()){//结果返回是true则执行

varomain=document.getElementById('main');

/*添加div到页面上*/

for(varl=0;l

varbox=document.createElement('div');

box.className="box";

omain.appendChild(box);

varpic=document.createElement('div');

pic.className='Pic';

box.appendChild(pic);

varoimg=document.createElement('img');

oimg.src="images/"+dataInt.data[l].src;

pic.appendChild(oimg);

}

waterFall('main','box');//新添加的div都要重新执行waterFall方法,以实现瀑布流效果

}

}

}

/*实现瀑布流效果,多栏布局*/

functionwaterFall(parent,pid){ //传两个参数,父元素parent和子元素pid

varoparent=document.getElementById(parent); //获取父元素

varopid=getClass(oparent,pid); //获取父元素下的classname为pid的所有子元素

varcols=Math.floor(oparent.offsetWidth/opid[0].offsetWidth);//父元素宽度/一个子元素的宽度,即一行的列数

vararrH=[]; //存放每一列的高度的数组

for(varj=0;j

if(j

arrH.push(opid[j].offsetHeight);//把第一行的高度都放进数组中

}else{ //第二行开始

varminH=Math.min.apply(null,arrH); //计算arrH的最小值

varIndex=getHIndex(arrH,minH);//使用getHIndex方法获取最小值的index值

/*把之后的div放到最小值div的下方*/

opid[j].style.position='absolute';

opid[j].style.top=minH+'px';

opid[j].style.left=opid[0].offsetWidth*Index+'px';

arrH[Index]+=opid[j].offsetHeight;//数组中的最小值加上已放在下方的div的高度值并重新循环

}

}

}

/*获取父元素下的classname为cls的所有元素*/

functiongetClass(parent,cls){

varobj=parent.getElementsByTagName('*');

varClsarr=[];

for(vari=0;i

if(obj[i].className==cls){

Clsarr.push(obj[i]);

}

}

returnClsarr;

}

/*获取arr数组中的最小值minH的Index值*/

functiongetHIndex(arr,minH){

for(vark=0;k

if(arr[k]==minH){

returnk;

}

}

}

/*判断当前滚动的高度时候大于最后的div出现在底部的高度值,即是否要加载*/

functioncheckIsSlide(){

varomain=document.getElementById('main');

varobox=getClass(omain,'box');

varlastTop=obox[obox.length-1].offsetTop+Math.floor(obox[obox.length-1].offsetHeight/2);

varscrollTop=document.body.scrollTop||document.documentElement.scrollTop;

vardocumentH=document.documentElement.clientHeight;

return(lastTop)<(scrollTop+documentH)?true:false;

}

</script>

效果图如下:

JS怎么实现简单的瀑布流加载图片效果

以上所述是小编给大家介绍的利用JS实现简单的瀑布流加载图片效果,希望对大家有所帮助

文章评论

热门栏目