javascript实现仿百度图片的瀑布流加载效果_

《javascript实现仿百度图片的瀑布流加载效果_》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、javascript实现仿百度图片的瀑布流加载效果_由于没有服务器，就用一个json字符串作为下拉时加载图片数据的来源了html:!DOCTYPEhtmlhtmlheadmetahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/scriptsrc="js/waterfall.js"/scriptstyletype="text/css"*{padding:0;margin:0;}#main{position:relative;}.pin{padding:15px

2、0015px;float:left;}.box{padding:10px;border:1pxsolid#ccc;box-shadow:006px#ccc;border-radius:5px;}.boximg{width:162px;height:auto;}/style/headbodydivid="main"divclass="pin"divclass="box"imgsrc="./images/1.jpg"//div/divdivclass="pin"divclass="box"imgsrc="./images/2.jp

3、g"//div/divdivclass="pin"divclass="box"imgsrc="./images/3.jpg"//div/divdivclass="pin"divclass="box"imgsrc="./images/4.jpg"//div/divdivclass="pin"divclass="box"imgsrc="./images/5.jpg"//div/divdivclass="pin"divclass="box"imgsrc="./images/6.jpg"//div/divdivclass="pin"d

4、ivclass="box"imgsrc="./images/7.jpg"//div/divdivclass="pin"divclass="box"imgsrc="./images/8.jpg"//div/divdivclass="pin"divclass="box"imgsrc="./images/9.jpg"//div/divdivclass="pin"divclass="box"imgsrc="./images/10.jpg"//div/divdivclass="pin"divclass="box"imgsrc="./im

5、ages/11.jpg"//div/divdivclass="pin"divclass="box"imgsrc="./images/12.jpg"//div/divdivclass="pin"divclass="box"imgsrc="./images/13.jpg"//div/divdivclass="pin"divclass="box"imgsrc="./images/14.jpg"//div/divdivclass="pin"divclass="box"imgsrc="./images/15.jpg"//div/divd

6、ivclass="pin"divclass="box"imgsrc="./images/16.jpg"//div/divdivclass="pin"divclass="box"imgsrc="./images/17.jpg"//div/divdivclass="pin"divclass="box"imgsrc="./images/18.jpg"//div/divdivclass="pin"divclass="box"imgsrc="./images/19.jpg"//div/divdivclass="pin"divclass=

7、"box"imgsrc="./images/20.jpg"//div/divdivclass="pin"divclass="box"imgsrc="./images/21.jpg"//div/div/div/body/htmlJSWallper.js:window.onload=function(){waterfall('main','pin');vardataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};windo

8、w.onscroll=function(){if(checkscrollside()){varoParent=document.getElementById('main');//父级对象for(vari=0;idataInt.data.length;i++){varoPin=