首页 > 代码库 > 瀑布流布局 js实现
瀑布流布局 js实现
瀑布流还蛮好看的，所以特意学习了下；
<div id="main">
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/1.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/2.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/3.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/5.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/6.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/7.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/8.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/9.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/10.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/11.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/12.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/13.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/14.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/15.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/16.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/17.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/18.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/19.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/20.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://www.mamicode.com/images/21.jpg"/>
</div>
</div>
</div>
首先我在html中添加21张图片。
*{padding: 0;margin:0;}
#main{
position: relative;
}
.pin{
padding: 15px 0 0 15px;
float:left;
}
.box{
padding: 10px;
border:1px solid #ccc;
box-shadow: 0 0 6px #ccc;
border-radius: 5px;
}
.box img{
width:162px;
height:auto;
}
简单的css样式；给大盒子添加一个相对定位属性；之后会用js给box添加绝对定位属性，让其相对于父盒子进行定位
下面开始js逻辑
window.onload=function(){
waterfall(‘main‘,‘pin‘);
var dataInt={‘data‘:[{‘src‘:‘1.jpg‘},{‘src‘:‘2.jpg‘},{‘src‘:‘3.jpg‘},{‘src‘:‘4.jpg‘}]};
window.onscroll=function(){
if(checkscrollside()){
var oParent = document.getElementById(‘main‘);// 父级对象
for(var i=0;i<dataInt.data.length;i++){
var oPin=document.createElement(‘div‘); //添加 元素节点
oPin.className=‘pin‘; //添加 类名 name属性
oParent.appendChild(oPin); //添加 子节点
var oBox=document.createElement(‘div‘);
oBox.className=‘box‘;
oPin.appendChild(oBox);
var oImg=document.createElement(‘img‘);
oImg.src=http://www.mamicode.com/‘./images/‘+dataInt.data[i].src;>
ok！一目了然的代码
瀑布流布局 js实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。