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="/static/imghwm/default1.png"  data-src="images/0.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/2.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/3.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/4.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/5.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/6.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/7.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/8.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/9.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/10.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/11.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/12.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/13.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/14.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/15.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/16.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/17.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/18.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/19.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/20.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/21.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/22.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/23.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/24.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/25.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/26.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </p>
        </p>
        <p class="box">
            <p class="pit">
                <img  src="/static/imghwm/default1.png"  data-src="images/27.jpg"  class="lazy"   alt="JS如何实现瀑布流效果" >
            </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

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。