本文实例为大家分享了js实现瀑布流布局展示的具体代码,供大家参考,具体内容如下
html部分
瀑布流布局
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
css部分
*{
padding:0px;
margin:0px;
}
.main{
position:relative;
}
.box{
padding:15px 0 0 10px;
float:left;
}
.pic{
padding:10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
/*float:left;*/
}
img{
width:170px;
height:auto;
}JS部分
装修公司源码,采用DIV+CSS布局,首页顶部采用了超大宽屏banner焦点图切换,带伸缩功能的导航条。首页信息展示量大,有利于SEO优化,首页版块包括,导航,焦点图切换,案例,行业动态,装修经验,装修知识。源码支持伪静态,后台开启即可,服务器必须支持rewrite功能,否则无法实现伪静态功能。信息支持二级分类。后台支持信息批量修改,删除,可以支持,视频,图片,附件上传。
window.onload=function(){
waterfall('main','box');
var dataInt={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"}]}
window.onscroll=function(){
if(checkScrollSlide){
for(var i=0;iheight?true:false;
} 课程地址。









