瀑布流

時間 2019-12-18

原文原文鏈接

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。