当前位置：文江博客话题详情

JavaScript CSS 瀑布流前端

求问，每个块高度不固定，随机出现横跨两三个列的块的瀑布流如何实现？

发布于 2022-09-03 13:56:33 字数 52 浏览 18 评论 0

求问，每个块高度不固定，随机出现横跨两三个列的块的瀑布流如何实现？图片传不上来啊尴尬……

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

北城挽邺 2022-09-10 13:56:33

希望对你有帮助，效果图如下：
图片描述

<!DOCTYPE html>
<html>
    <head>
        <title>自适应瀑布流</title>
    </head>
    <style type="text/css" media="screen">
    #wrap li {
        list-style: none;
        margin: 10px;
        border: 2px solid gray;
        position: absolute;
        font-size: 100px;
        text-align: center;
        width: 200px;
        transition: all .5s;
    }
    </style>
    <body>
        <ul id="wrap"></ul>
    </body>
    <script type="text/javascript">
    var wrap = document.querySelector("#wrap");
    //生成随机高度
    function rand(min, max) {
        return parseInt(Math.random() * (max - min) + min);
    }
    var colsArr = []; //定义一个数组 存放每一列的高度
    //得到当前窗口下的总列数
    function getCols() {
        colsArr = [];
        var wWidth = document.body.clientWidth;
        //得到总列数
        var cols = parseInt(wWidth / (200 + 10));
        for (var i = 0; i < cols; i++) {
            colsArr.push(0);
        }
    }
    getCols();
    //创建一个LI  追加到父元素中
    function createLi(index) {
        var li = document.createElement("li");
        var num = rand(100, 200);
        li.style.height = num + "px";
        li.style.lineHeight = num + "px";
        li.innerHTML = index;
        wrap.appendChild(li);
        setPos(li);
    }

    //计算LI所在的实际位置
    function setPos(li) {
        //初始下标为0
        var minIndex = 0;
        var minHeight = colsArr[minIndex];
        //colsArr = [0,0,0,]
        for (var i = 0; i < colsArr.length; i++) {
            if (minHeight > colsArr[i]) {
                minIndex = i;
                minHeight = colsArr[i];
            }
        }
        li.style.top = minHeight + "px";
        li.style.left = minIndex * (200 + 10) + "px";
        colsArr[minIndex] += li.clientHeight;
    }
    var count = 1;
    function _run(num) {
        num ? num : num=20;
        for (var i = 0; i < num; i++) {
            createLi(count++);
        }
    }
    _run();
    //监听滚动事件
    window.onscroll = function() {
        //得到滚动距离
        var sHeight = document.documentElement.scrollTop || document.body.scrollTop;
        //得到总的高度 含滚动长的距离
        var aHeight = document.body.scrollHeight;
        //得到页面的视口高度
        var cHeight = document.documentElement.clientHeight || document.body.clientHeight;
        console.log(sHeight, aHeight, cHeight);
        //如果视口高度 + 滚动距离 超过了 总高度  则追加下X条
        if (cHeight + sHeight >= aHeight) {
            _run(30);
        }
    }
    window.onresize = function(){
        getCols();
        var lis = document.querySelectorAll("li");
        for(var i=0;i<lis.length;i++){
            setPos(lis[i]);
        }
    }
    </script>
</html>

乱世争霸 2022-09-10 13:56:33

你可以去慕课网搜一个瀑布流布局的教程哪里讲的还不错还有网上也有很多的你可以借鉴别人的思路多搜索

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

25 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

书间行客

文章 0 评论 0

我ぃ本無心為│何有愛

文章 0 评论 0

神妖

文章 0 评论 0

undefined

文章 0 评论 0

38169838

文章 0 评论 0

彡翼

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文