加载中...

瀑布流 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流</title>
<style>
.out{position: relative; margin: 0 auto;}
.in{ float:left;}
img{ margin:10px; padding:10px; border:1px solid lightgray; border-radius:15px; box-shadow:0px 0px 5px #F63;}
</style>
</head>

<body>
<div class="out"></div>
<script>
    //模拟获取到的数据
    var arrData=['images/i1.jpg','images/i2.jpg','images/i3.jpg','images/i4.jpg','images/i5.jpg','images/i6.jpg','images/i7.jpg','images/i8.jpg','images/i9.jpg','images/i10.jpg','images/i11.jpg','images/i12.jpg','images/i13.jpg','images/i14.jpg','images/i15.jpg'];
    //准备页面的元素
    var outDiv = document.querySelector('.out');
    
    //数据准备完毕后，将数据加载页面
    for(var i=0; i<arrData.length; i++){
        var div =document.createElement('div');
        div.className = 'in';
        div.innerHTML ='<img src="'+arrData[i]+'">';
        outDiv.appendChild(div);
    }
    
    //页面加载完毕后，构建瀑布流的结构
    window.onload =function(){
        var inDivs =document.querySelectorAll('.in');
        var num = Math.floor(document.documentElement.clientWidth/inDivs[0].offsetWidth);
        outDiv.style.width =num*inDivs[0].offsetWidth+'px';
        var heightArr =[]    //储存第一行的高度
        
        //所有的div中，只有第一行不用定位
        for(var i=0;i<inDivs.length;i++){
            if(i<num){
                //第一行
                heightArr.push(inDivs[i].offsetHeight);
            }else{
                //其余行
                inDivs[i].style.position ='absolute';
                minHeight = Math.min.apply(null,heightArr);
                minIndex = heightArr.indexOf(minHeight);
                
                //开启定位
                inDivs[i].style.top =minHeight+'px';
                inDivs[i].style.left=inDivs[minIndex].offsetLeft+'px';
                
                //将高度进行累加
                heightArr[minIndex] +=inDivs[i].offsetHeight;
            }
        }
    }
</script>
</body>
</html>

 

posted @ 2019-01-23 20:58  royal6  阅读(111)  评论(0)    收藏  举报