JS如何達到瀑布流效果-js教程-PHP中文網

首頁

web前端

js教程

JS如何達到瀑布流效果

一个新手

Sep 08, 2017 am 11:44 AM

javascript 效果

今天抽空再寫一篇，寫個瀑布流的效果。做過iOS的都知道瀑布流在iOS中也是個很流行的佈局方式，這裡就不再多介紹了。讓我們來看看如何用JS來達到瀑布流的效果。

我就直接上程式碼了，裡面的註解都很清晰。不懂的可以來問我。

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流效果</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
    <!--父标签-->
    <p id="main">
        <p class="box">
            <p class="pit">
                <img src="images/0.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/1.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/2.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/3.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/4.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/5.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/6.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/7.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/8.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/9.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/10.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/11.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/12.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/13.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/14.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/15.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/16.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/17.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/18.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/19.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/20.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/21.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/22.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/23.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/24.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/25.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/26.jpg">
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img src="images/27.jpg">
            </p>
        </p>
    </p>

    <script src="js/index.js" type="text/javascript"></script>
</body>
</html>

登入後複製

CSS：

a, address, b, big, blockquote, body, center, cite, code, dd, del, p, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
    padding: 0;
    margin: 0;
}

#main {
    position: relative;
}

#main .box {
    padding: 15px 0 0 15px;
    float: left;
}

#main .box .pit {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 0 2px gray;
    width: 165px;
}

#main .box .pit img {
    width: 165px;
}

登入後複製

JS：

/**
 * Created by huminghao on 2017/7/5.
 */
function $(id) {
    return typeof id === &#39;string&#39; ? document.getElementById(id) : id;
}

// 当页面加载完毕
window.onload = function () {
    // 实现瀑布流
    waterFlow(&#39;main&#39;, &#39;box&#39;);

    // 监听页面的滚动
    window.onscroll = function () {
        // 判断是否具备加载图片的条件
        if (checkWillLoadImg()) {
            // 造数据
            var dataImg = {&#39;data&#39; : [{&#39;src&#39; : &#39;0.jpg&#39;}, {&#39;src&#39; : &#39;1.jpg&#39;},{&#39;src&#39; : &#39;2.jpg&#39;},{&#39;src&#39; : &#39;3.jpg&#39;},{&#39;src&#39; : &#39;4.jpg&#39;},{&#39;src&#39; : &#39;5.jpg&#39;},{&#39;src&#39; : &#39;6.jpg&#39;},{&#39;src&#39; : &#39;7.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;},{&#39;src&#39; : &#39;0.jpg&#39;}]}

            for (var i = 0; i < dataImg.data; i ++) {
                // 创建最外层的盒子
                var newBox = document.createElement(&#39;p&#39;);
                newBox.className = &#39;box&#39;;
                $(&#39;main&#39;).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 = &#39;images/&#39; + dataImg.data[i].src;
                newPic.appendChild(newImg);
            }
        }
    }

}


// 实现瀑布流
function waterFlow(parent, box) {
    // 让所有盒子的父标签居中
    // 1.拿到所有的盒子
    var allBoxs = $(parent).getElementsByClassName(box);

    // 2.拿到其中一个盒子的宽度
    var boxWidth = allBoxs[0].offsetWidth;

    // 3.求出页面的宽度
    var screenWidth = document.body.clientWidth;

    // 4.求出列数
    var clos = Math.floor(screenWidth / boxWidth);

    // 5.让父标签居中
    $(parent).style.cssText = &#39;width: &#39; + clos * boxWidth + &#39;px; margin: 0 auto&#39;;


    // 定位
    // 定义一个高度数组
    var heightArray = [];

    // 遍历
    for (var i = 0; i < allBoxs.length; i ++) {
        // 求出所有盒子的高度
        var boxHeight = allBoxs[i].offsetHeight;

        if (i<clos) { // 第一行
            heightArray.push(boxHeight);

            console.log(heightArray);
        }else { // 剩余行
            // 取出最矮盒子
            var minBoxHeight = Math.min.apply(null, heightArray);
            // 取出最矮盒子对应的索引
            var minBoxIndex = getMinIndex(minBoxHeight, heightArray);
            // 对剩余的盒子进行定位
            allBoxs[i].style.position = &#39;absolute&#39;;
            allBoxs[i].style.top = minBoxHeight + &#39;px&#39;;
            allBoxs[i].style.left = minBoxIndex * boxWidth + &#39;px&#39;;

            // 替换高度
            heightArray[minBoxIndex] = minBoxHeight + boxHeight;
        }
    }
}


// 求出最矮盒子在数组中的索引
function getMinIndex(value, array) {
    for (var i = 0; i < array.length; i ++) {
        if (value == array[i]) {
            return i;
        }
    }
}

// 判断是否具备加载图片的条件
function checkWillLoadImg() {
    // 拿到所有的盒子
    var allBoxs = $(&#39;main&#39;).getElementsByClassName(&#39;box&#39;);

    // 取出最后一个盒子
    var lastBox = allBoxs[allBoxs.length - 1];

    // 求出最后一个盒子高度的一半 + 头部偏移的位置
    var lastBoxHeightDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;

    // 求出屏幕的高度
    var screenHeight = document.body.clientHeight || document.documentElement.clientHeight;

    // 求出页面偏离浏览器的高度
    var offSetTop = document.body.offsetTop || document.documentElement.offsetTop;
    console.log(lastBoxHeightDis, screenHeight, offSetTop);

    return lastBoxHeightDis < (offSetTop + screenHeight) ? true : false;
}

登入後複製

以上是JS如何達到瀑布流效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7779

Java教學

1644

CakePHP 教程

1399

Laravel 教程

1296

PHP教程

1234

Related knowledge

用戶遭遇罕見故障三星 Watch 智慧手錶突現白螢幕問題 Apr 03, 2024 am 08:13 AM

你可能遇到過智慧型手機螢幕出現綠色線條的問題，即使沒看過，也一定在網路上看過相關圖片。那麼，智慧手錶螢幕變白的情況你有遇見過嗎？ 4月2日，CNMO從外媒了解到，一名Reddit用戶在社群平台上分享了一張圖片，展示了三星Watch系列智慧手錶螢幕變白的情況。該用戶寫道："我離開時正在充電，回來時就這樣了，我嘗試重啟，但重啟過程中屏幕還是這樣。"三星Watch智能手錶屏幕變白這位Reddit用戶並未指明這款智能手錶的具體型號。不過，從圖片上看，應該是三星Watch5。此前，另一位Reddit用戶也報告

九州風神阿薩辛 4S 散熱器評測風冷「刺客大師」範兒 Mar 28, 2024 am 11:11 AM

說起阿薩辛ASSASSIN，相信玩家們一定會想到《刺客信條》中的各位刺客大師，不僅身手了得，而且"躬身於黑暗、服務於光明"的信條，與國內知名機箱/電源/散熱器品牌九州風神（DeepCool）旗下的阿薩辛ASSASSIN系列旗艦級風冷散熱器不謀而合。最近，該系列的最新產品阿薩辛ASSASSIN4S重磅上線，"西裝刺客，再進階"為高級玩家帶來全新的風冷散熱體驗。外觀一覽細節滿滿阿薩辛4S散熱器採用雙塔構造+單風扇內嵌設計，外麵包覆立方體造型的整流罩，整體感極強，並提供白、黑兩種配色可選，滿足不同色系

輕鬆拿捏 4K 高畫質影像理解！這個多模態大模型自動分析網頁海報內容，打工人簡直不要太方便 Apr 23, 2024 am 08:04 AM

一個可以自動分析PDF、網頁、海報、Excel圖表內容的大模型，對於打工人來說簡直不要太方便。上海AILab，香港中文大學等研究機構提出的InternLM-XComposer2-4KHD（簡寫為IXC2-4KHD）模型讓這一切成為了現實。相較於其他多模態大模型不超過1500x1500的分辨率限制，該工作將多模態大模型的最大輸入影像提升到超過4K（3840x1600）分辨率，並支援任意長寬比和336像素～4K動態解析度變化。發布三天，模型就登頂HuggingFace視覺問答模型熱度排行榜第一。輕鬆拿捏

航空嘉 MX750P 全模組電源評測：750W 的白金實力濃縮 Mar 28, 2024 pm 03:20 PM

ITX平台以小巧的身形吸引了許多追求極致和獨特美感的玩家，隨著製程的提升和技術的進步，英特爾第14代酷睿和RTX40系顯卡都可以在ITX平台中發揮實力，遊戲玩家也對SFX電源有了更高的要求。遊戲愛好者航空嘉推出新的MX系列電源，在滿足高效能需求的ITX平台中，MX750P全模組電源的定額功率高達750W，同時通過了80PLUS白金級認證。以下我們就帶來這款電源的評測。航嘉MX750P全模組電源採用了簡約時尚的設計理念，共有黑白兩款供玩家選擇，均採用磨砂表面處理，搭配銀灰色和紅色的字體有很好的質感，

春日裡的精緻光影藝術，哈趣 H2 性價比之選 Apr 17, 2024 pm 05:07 PM

隨著春天的到來，萬物復甦，一切都充滿了生命與活力。在這個美好的季節裡，如何為居家生活增添一抹別樣的色彩？哈趣H2投影儀，以其精緻的設計和超高的性價比，成為了這個春天裡不可或缺的一道亮麗風景。這款H2投影機小巧玲瓏卻不失時尚。無論是放在客廳的電視櫃上，或是臥室的床頭櫃旁，都能成為一道明亮的風景線。它的機身採用了奶白色的磨砂質地，這種設計不僅讓投影機的外觀更顯高級，同時也增加了觸感的舒適度。米色仿皮紋材質，更為整體外觀增添了一抹溫馨與雅緻。這種色彩與材質的搭配，既符合現代家居的美感趨勢，又能融入

七彩虹隱星 P15 24 評測：顏值性能兼具的硬蕊全能遊戲本 Mar 06, 2024 pm 04:40 PM

在當下科技快速發展的時代，筆記型電腦已成為人們日常生活和工作中不可或缺的重要工具。對於那些對性能有高要求的玩家而言，擁有配置強大、性能出色的筆記型電腦才能滿足其硬核需求。七彩虹隱星P15筆記型電腦憑藉其卓越性能和令人驚豔的設計，成為了未來的引領者，堪稱硬核筆記本的典範。七彩虹隱星P1524配備了13代英特爾酷睿i7處理器和RTX4060LaptopGPU，外觀採用更時尚的太空船設計風格，同時在細節表現上也有出色表現。讓我們先來了解這款筆記本的特點。至高搭載英特爾酷睿i7-13620H處理

螢幕好打遊戲才夠爽 iQOO Neo9S Pro+ 螢幕簡析 Jul 19, 2024 pm 03:53 PM

在當今智慧型手機市場中，螢幕素質已成為衡量一款手機綜合性能的關鍵指標之一。 iQOO旗下的Neo系列一直致力於為用戶提供出色的遊戲體驗和視覺享受，最新款產品iQOONeo9SPro+更是採用一塊"三好護眼電競屏"，接下來我們就來一起看看這塊屏幕的素質有多出色。 iQOONeo9SPro+搭載了一塊1.5KOLED電競直屏，支援從1Hz到144Hz的旗艦級LTPO自適應刷新率，意味著在顯示靜態內容時能夠實現超低功耗的待機狀態，而在遊戲過程中也能智能切換至90Hz至144Hz的動態高

真正的一鏡走天下尼克爾 Z 28-400mm f/4-8 VR 鏡頭上手體驗 Mar 28, 2024 pm 02:54 PM

許多攝影愛好者喜歡使用鏡頭，他們的拍攝需求非常多變，因此在鏡頭的選擇上更傾向於一支比較全能的產品，也就是我們俗稱的"一鏡走天下"鏡頭。剛好，現在尼康推出了新的產品，尼克爾Z28-400mmf/4-8VR鏡頭，一支真正的"一鏡走天下"鏡頭。鏡頭從28mm廣角端一直覆蓋到400mm長焦端，配備其Z卡口相機，可以輕鬆拍攝十分豐富的攝影主題，並帶來一場豐富的視角變化。今天，我們就透過近期的使用體驗，跟大家一起聊聊這支尼克爾Z28-400mmf/4-8VR鏡頭。尼克爾Z28-400mmf/4-8VR是

See all articles

JS如何達到瀑布流效果

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題