瀑布流佈局實現的程式碼-html教學-PHP中文網

首頁

web前端

html教學

瀑布流佈局實現的程式碼

不言

Aug 07, 2018 am 09:52 AM

css html javascript

這篇文章要跟大家介紹的內容是關於瀑布流佈局實現的程式碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>waterfall layout</title>
<link type="text/css" href="./imgs/wf.css" rel="stylesheet"/> 
<script type="text/javascript" src="./imgs/wf.js"></script>
</head>
<body>
<div id="main">
    <div class="box">
        <div class="pic">
            <img src="imgs/0.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/1.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/2.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/3.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/4.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/5.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/6.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/7.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/8.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/9.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/10.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/11.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/12.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/13.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/14.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/15.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/16.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/17.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/18.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/19.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/20.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/21.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/22.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/23.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/24.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="imgs/25.jpg"/>
        </div>
    </div>
</div>
</body>
</html>

登入後複製

wf.css

@CHARSET "UTF-8";
*{margin:0;padding:0}
#main{
    position: relative;
    margin: 10px auto 0 auto;
}
.box{
    float:left;
    padding: 0 0 15px 15px; 
}
.pic{
    border: 1px solid #ccc;
    padding: 10px;
}
.box img{
    width: 200px;
    height: auto;
}

登入後複製

wf.js

window.onload = function(){
    waterfall();
    //要加载的数据，暂时写一个固定数据
    var dataInt = {"data":[{"src":&#39;3.jpg&#39;},{"src":&#39;13.jpg&#39;},{"src":&#39;23.jpg&#39;},{"src":&#39;1.jpg&#39;}]};
    //一个判断拖动滚动条后是否加载新内容的方法
    window.onscroll = function(){
        if(checkScrollSlide()){
            //将数据块渲染到当前页的尾部
            for(var i = 0; i < dataInt.data.length;i++){
                var parent = document.getElementById(&#39;main&#39;);
                var newBox = document.createElement(&#39;p&#39;);
                newBox.className = &#39;box&#39;;
                parent.appendChild(newBox);
                var newPic = document.createElement(&#39;p&#39;);
                newPic.className = &#39;pic&#39;;
                newBox.appendChild(newPic);
                var newImg = document.createElement(&#39;img&#39;);
                newImg.src = "./imgs/" + dataInt.data[i].src;
                newPic.appendChild(newImg);
                waterfall();
            }
        }
    }
}
function waterfall(){
    var parent = document.getElementById("main");
    //写一个方法根据类名box，找到所有节点
    var boxArr = getByClass(parent,&#39;box&#39;);
    //console.log(boxArr.length);//26，检验是否获取到
    var bodyWidth = document.body.clientWidth;
    //document.body.clientWidth  窗口实时显示时的body的宽度
    var colWidth = boxArr[0].offsetWidth;//box p的宽度
    var cols = Math.floor(bodyWidth / colWidth);
    //给main p一个宽度，从而让显示内容不会随着浮动，改变布局
    var mainWidth = colWidth * cols;
    parent.style.cssText = &#39;width:&#39; + mainWidth + &#39;px;&#39;;
    var colsHeight = [];//放列高度的数组
    for(var i = 0; i < boxArr.length;i++){
        var iBox = boxArr[i];
        if(i < cols){
            colsHeight.push(iBox.offsetHeight);
        }else{
            var rArr = searchMin(colsHeight);
            var index = rArr[0];
            var minH = rArr[1];
            var left = parseInt(index * colWidth);
            var top = minH;
            iBox.style.position = "absolute";
            iBox.style.left = left + &#39;px&#39;;
            iBox.style.top = top + &#39;px&#39;;
            colsHeight[index] += iBox.offsetHeight;
        }
    }
}

function getByClass(parent,clsName){
    //用通配符获得prent下的所有标签节点
    var allTags = document.getElementsByTagName("*");
    var arr = new Array();
    for(var i = 0; i < allTags.length;i++){
        if(allTags[i].className == clsName){
            arr.push(allTags[i]);
        }
    }
    return arr;
}
function searchMin(arr){
    var min = arr[0];
    var index = 0;
    for(var j = 0; j < arr.length; j++){
        if(arr[j] < min){
            min = arr[j];
            index = j;
        }
    }
    return [index,min];    
}
function checkScrollSlide(){
    var parent = document.getElementById(&#39;main&#39;);
    var boxArr = getByClass(parent,&#39;box&#39;);
    var lastBox = boxArr[boxArr.length-1];
    var lbHeight = lastBox.offsetTop+Math.floor(lastBox.offsetHeight/2);
    console.log(lbHeight);
    var slideH = document.body.scrollTop || document.documentElement.scrollTop;
    console.log(slideH);
    var winH = document.body.clientHeight || document.documentElement.clientHeight;
    console.log(winH);
    var swHeight = slideH + winH;
    return (lbHeight < swHeight) ? true : false;
}

登入後複製

相關文章推薦：

div標籤：水平居中和垂直居中的實作（附程式碼）

css box-sizing屬性（盒子模型）的用法介紹

以上是瀑布流佈局實現的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7492

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。