图片 直播 html5 瀑布流,HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影...

又是一个网页瀑布流效果，可以实现图片的无限制加载。基于时下流行的HTML5技术编写而成，演示页面中一共调用了7张图片，为了演示方便，这里让其随滚动条的滚动自动循环除了实现瀑布流，还加入了CSS5的图片修饰效果，诸如图片的圆角边框，图片阴影立体效果等，是学习瀑布流的好素材。。

复制代码

代码如下：

jQuery无限加载瀑布流/*标签重定义*/body{padding：0;margin：0;background：#dddurl(/jscss/demoimg/201312/bg55.jpg)repeat;}img{border：none;}a{text-decoration：none;color：＃444;}a：hover{color：＃999;}#title{width：600px;margin：20pxauto;text-align：center;}/*定义关键帧*/@-webkit-keyframesshade{from{opacity：1;}15％{opacity：0.4;}至{opacity：1;}}

@-moz-keyframes阴影{从{opacity：1;}15％{opacity：0.4;}到{opacity：1;}}@-ms-keyframes阴影{from{opacity：1;}15％{opacity：0.4;}to{opacity：1;}}@-o-关键帧阴影{from{opacity：1;}15％{opacity：0.4;}to{opacity：1;}}@keyframesshade{from{opacity：1;}15％{opacity：0.4;}到{opacity：1;}}/*wrap*/#wrap{width：auto;height：auto;margin：0auto;position：relative;}#wrap.box{width：280px;height：auto;padding：10px;border：none;float：left;}#wrap.box.info{width：280px;height：auto;border-radius：8px;box-shadow：0011px＃666;背景：#fff;}

#wrap.box.info.pic{width：260px;height：auto;margin：0auto;padding-top：10px;}#wrap.box.info.pic：hover{-webkit-animation：shade3seasy-in-出1;-moz动画：阴影3s缓入1；-ms-animation：阴影3s缓入1；-o动画：阴影3s缓入1；动画：阴影3s缓入1；}#wrap.box.info.picimg{width：260px;border-radius：3px;}#wrap.box.info.title{width：260px;height：40px;margin：0auto;line-height：40px;text-align：center;color：＃666;font-size：18px;font-weight：bold;overflow：hidden;}窗口。

//运行瀑布流主函数PBL('wrap'，'box');//模拟数据vardata=[{'src'：'1.jpg'，'title'：'图片标题'}，{'src'：'2.jpg'，'title'：'图片标题'}，{'src'：'3.jpg'，'title'：'图片标题'}，{'src'：'4.jpg'，'title'：'图片标题'}，{'src'：'5。jpg'，'title'：'图片标题'}，{'src'：'6.jpg'，'title'：'图片标题'}，{'src'：'7.jpg'，'title'：'图片标题'}];//设置滚动加载window.οnscrοll=function(){//验证数据请求if(getCheck()){varwrap=document.getElementById('wrap');for(iindata){//创建boxvarbox=document.createElement('div');box.className='框';wrap.appendChild(box);//创建信息varinfo=document.createElement('div');info.className='信息';box.appendChild(info);//创建图片

varpic=document.createElement('div');pic.className='pic';info.appendChild(pic);//创建imgvarimg=document.createElement('img');img.src='/jscss/demoimg/201312/'+data[i].src;img.style.height='自动';pic.appendChild(img);//创建标题vartitle=document.createElement('div');title.className='标题';info.appendChild(title);//创建一个标记vara=document.createElement('a');a.innerHTML=data[i].title;title.appendChild(a);}PBL('wrap'，'box');

*/functionPBL(wrap，box){//1。获得外层以及每一个框varwrap=document.getElementById(wrap);varboxs=getClass(wrap，box);//2。获得屏幕可显示的列数varboxW=boxs[0].offsetWidth;varcolsNum=Math.floor(document.documentElement.clientWidth/boxW);wrap.style.width=boxW*colsNum+'px';//为外层赋值宽度//3。循环出所有的box并按照瀑布流划分vareveryH=[];//定义一个多层存储每一列的高度for(vari=0;i

everyH[minIndex]+=boxs[i].offsetHeight;//更新最小列的高度}}}/***获取类元素*@paramwarp[Obj]外层*@paramclassName[Str]类名*/函数getClass(wrap，className){varobj=wrap.getElementsByTagName('*');vararr=[];for(vari=0;i

}/***数据请求检验*/functiongetCheck(){vardocumentH=document.documentElement.clientHeight;varscrollH=document.documentElement.scrollTop||document.body.scrollTop;返回documentH+scrollH>=getLastH()？true：false;}/***获得最后一个盒子位于列的高度*/函数getLastH(){varwrap=document.getElementById('wrap');varboxs=getClass(wrap，'box');returnboxs[boxs.length-1].offsetTop+boxs[boxs.length-1].offsetHeight;}/***设置加载样式*@parambox[obj]设置的Box*@paramtop[Num]box的顶部值*@paramleft[Num]box的左值*@paramindex[Num]box的第几个*/

vargetStartNum=0;//设置请求加载的条数的位置函数getStyle(box，top，left，index){if(getStartNum>=index)return;$(box).css({'position'：'absolute'，'top'：top，“left”：left，“opacity”：“0”});$(box).stop()。animate({“opacity”：“1”}，999);getStartNum=index;//更新请求数据的条数位置}

瀑布流效果的学习

通过微笑。<