实现瀑布流布局

实现瀑布流布局

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。

实例#

主体思路是记录每一列的高度，父容器相对定位，成员绝对定位，利用top与left属性控制位置，每次新增加成员时找到高度最低的那个将成员置于其下方，即可实现瀑布流布局。如果不需要动态加入成员，而只是一次性加载供展示用，那么可以考虑使用flex布局将容器设置为flex-direction: column;以及flex-wrap: wrap;并给予容器一个合适的高度来实现，还可以使用CSS3新增的column-*多列布局来实现，这两种也就是纯CSS实现的瀑布流布局的方式，但是由于这两种方式都是将成员纵向排列，并不适合需要动态插入成员的布局，当需要动态插入成员时还是需要使用Js来实现。

Copy
<!DOCTYPE html>
<html>
<head>
    <title>Js瀑布流布局</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
    <style type="text/css">
        #container{
            position: relative; /* 父容器relative */
        }
        .item{
            position: absolute; /* 成员设置为absolute */
            display: flex; /* 主要为显示字居中 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            color: #fff; /* 字体颜色白色 */
        }
    </style>
</head>
<body>
    <div id="container"></div>
</body>
    <script type="text/javascript">
        var column = 3; // 制作三列布局
        var counter = 0; // 计数器 为显示当前块计数
        var columnHeight = Array(column).fill(0); // 记录每列高度
        var container = document.getElementById("container"); // 父容器对象
        var colorList = ["#EAA78C", "#F9CD82", "#9ADEAD", "#9CB6E9", "#E49D9B", "#97D7D7", "#ABA0CA", "#9F8BEC","#ACA4D5", "#6495ED", "#7BCDA5", "#76B4EF","#E1C38F","#F6C46A","#B19ED1","#F09B98","#87CECB","#D1A495","#89D196","#FE9E9F", "#93BAFF", "#D999F9", "#81C784", "#FFCA62", "#FFA477"]; // 颜色列表
         
        function random(min=0, max=1) { // 生成随机数
          return min + ~~((max-min)*Math.random()) // min <= random < max 
        }

        function findMinColumn(arr){ // 找到高度最小的列
            var min = arr[0];
            var index = 0;
            arr.forEach((v,i) => {
                if(v < min) {
                    min = v;
                    index = i;
                }
            })
            return [index,min];
        }


        function appendImg(){
            var gap = 3; // 间隙设为3px
            for(let i=0;i<12;++i){ // 每次加载12个成员
                var unit = {
                    height:random(100,500), //随机一个不定高度
                    width: 300, // 定宽
                    color: colorList[random(0,colorList.length)] // 随机颜色
                }
                var [minIndex,min] = findMinColumn(columnHeight); // 获取高度最小列以及下标
                var d = document.createElement("div");  // 创建一个节点
                d.className = "item"; // 设置class
                d.style.background = unit.color; // 设置背景颜色
                d.style.height = `${unit.height}px`; // 设置宽度
                d.style.width = `${unit.width}px`; // 设置宽度
                d.style.top = `${min + gap}px`; // 设置上偏移
                d.style.left = `${(300 + gap) * minIndex}px`; // 设置左偏移
                d.innerText = `${++counter}#${unit.height}X${unit.width}`; // 设置文字
                columnHeight[minIndex] += (unit.height+gap); // 更新选中列的高度
                container.appendChild(d); // 添加节点
            }
        }

        function init(){
            appendImg(); // 初始加载
            var endLoad = columnHeight.some(v => v > window.innerHeight); // 获取是否有某列高度大于屏幕高度
            if(!endLoad) init(); // 如果没有则递归调用继续加载
        }

        (function(){
             init(); // 打开页面自动加载
        })();

        window.onscroll = function (){ // 浏览器触底事件
            var marginBottom = 0;
            if (document.documentElement.scrollTop){
                var scrollHeight = document.documentElement.scrollHeight;
                var scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
                var clientHeight = document.documentElement.clientHeight;
                marginBottom= scrollHeight - scrollTop - clientHeight;
            } else {
                var scrollHeight = document.body.scrollHeight;
                var scrollTop = document.body.scrollTop;
                var clientHeight = document.body.clientHeight;
                marginBottom= scrollHeight - scrollTop - clientHeight;
            }
            if(marginBottom<=0) appendImg();
        }

    </script>
</html>

每日一题#

Copy
https://github.com/WindrunnerMax/EveryDay

参考#

Copy
https://www.cnblogs.com/imgss/p/11072266.html
https://blog.csdn.net/weixin_44135121/article/details/98629830
posted @   WindRunnerMax  阅读(196)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示
CONTENTS
✕