好资源导航 » 文章资讯 » JS实现瀑布流布局

JS实现瀑布流布局

2023-09-22 19:49:04 64

本文实例为大家分享了JS实现瀑布流布局展示的具体代码，供大家参考，具体内容如下

html部分





瀑布流布局

css部分

*{
padding:0px;
margin:0px;
}
.main{
position:relative;
}
.box{
padding:15px0010px;
float:left;
}
.pic{
padding:10px;
border:1pxsolid#ccc;
border-radius:5px;
box-shadow:005px#ccc;
/*float:left;*/
}
img{
width:170px;
height:auto;
}

JS部分

window.onload=function(){
waterfall('main','box');
vardataInt={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"}]}
window.onscroll=function(){
if(checkScrollSlide){
for(vari=0;iheight?true:false;
}

课程地址。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

JS实现瀑布流布局

热门推荐

随机推荐