瀑布流（31）

最新推荐文章于 2025-05-21 14:03:42 发布

向上的二狗

最新推荐文章于 2025-05-21 14:03:42 发布

阅读量107

点赞数

文章标签： html5 html

本文链接：https://blog.youkuaiyun.com/qq_45738592/article/details/120523223

版权

JavaScript 专栏收录该内容

41 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript和jQuery实现瀑布流布局，通过获取数据并按列高度排序进行内容填充，确保列间高度差最小。同时，文章还展示了在页面滚动到底部时如何加载更多数据，实现无限滚动加载的效果，确保用户体验流畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

* 瀑布流

* 效果：多列的不规则排列，每一列中有很多内容，每一项内容的高度不定，最后我们按照规则排列，三列之间不能相差太多高度

*

* 实现：首先获取需要展示的数据（假设有50条，共三列），把50条数据中的前三条依次插入到三列中（目前有的列高有的列低），接下来在拿出三条数据，但是本次插入不是依次插入，而是需要先把当前三列按照高矮进行排序，哪个最矮，先给哪个插入内容，以此类推，把50条数据都插入即可

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>珠峰培训-瀑布流</title>
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<ul class="flowBox clearfix">
    <li>
        <!--<a href="#">
            <div><img src="img/13.jpg" alt=""></div>
            <span>泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证</span>
        </a>-->
    </li>
    <li>

    </li>
    <li>

    </li>
</ul>

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>

html, body {
    background: #F4F4F4;
    overflow-x: hidden;
}

.flowBox {
    margin: 20px auto;
    width: 1000px;
}

.flowBox li {
    float: left;
    margin-right: 20px;
    width: 320px;
}

.flowBox li:nth-last-child(1) {
    margin-right: 0;
}

.flowBox li a {
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    background: #FFF;
    box-shadow: 3px 3px 10px 0 #666; /*CSS3设置盒子阴影：(inset) X Y 阴影模糊度 阴影模糊半径 阴影的颜色*/
}

/*.flowBox li a div {*/
    /*background: url("../img/default.gif") no-repeat center center #EEE;*/
/*}*/

.flowBox li a div img {
    display: block;
    width: 100%;
}

.flowBox li a span {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: #555;
    line-height: 20px;
}

$(function () {
    //=>当HTML结构加载完成才会执行这里的代码(闭包)

    //1.获取需要的数据
    //真实项目中，我们第一页加载完成，当用户下拉到底部，开始获取第二页的内容。服务器端会给我们提供一个API获取数据的地址，并要求客户端把获取的是第几页的内容传递给服务器，服务器依照这个原理把对应不同的数据返回“分页技术”
    let page = 0,
        imgData = null;
    let queryData = () => {
        page++;
        $.ajax({
            url: `json/data.json?page=${page}`,
            method: 'get',
            async: false,//=>同步请求（真实项目中使用的是异步）
            dataType: 'json',//=>把从服务器端获取的JSON字符串转化为对象(我们这样设置后，JQ内部会帮我们转换)
            success: result => {
                //=>result:就是我们从服务器端获取的结果
                imgData = result;
            }
        });
    };
    queryData();

    //2.数据绑定
    //=>传递一个对象进来,返回对应的结构字符串
    let queryHTML = ({id, pic, link, title} = {}) => {
        return `<a href="${link}">
            <div><img src="${pic}" alt=""></div>
            <span>${title}</span>
        </a>`;
    };

    let $boxList = $('.flowBox > li'),
        boxList = [].slice.call($boxList);
    // console.log($boxList.get());//=>把JQ类数组对象转换为数组(GET不能传参,传参数就是获取类数组中的某一项了)
    for (let i = 0; i < imgData.length; i += 3) {
        //=>分别获取每三个为一组,一组中的三个内容（存在的隐性风险：当前数据总长度不是3的倍数，那么最后一次循环的时候，三个中的某一个会不存在，获取的ITEM值是UNDEFINED）
        let item1 = imgData[i],
            item2 = imgData[i + 1],
            item3 = imgData[i + 2];
        //=>我们接下来要把获取的ITEM依次插入到每一个LI中，但是绝对不是按照顺序插入，我们需要先按照每一个LI的现有高度给LI进行排序（小->大），按照最新的顺序依次插入即可
        boxList.sort((a, b) => a.offsetHeight - b.offsetHeight);

        if (item1) {
            boxList[0].innerHTML += queryHTML(item1);
        }

        if (item2) {
            boxList[1].innerHTML += queryHTML(item2);
        }

        if (item3) {
            boxList[2].innerHTML += queryHTML(item3);
        }
    }


});

$(function () {
    //1.获取数据
    let page = 0,
        imgData = null,
        isRun = false;
    let queryData = () => {
        page++;
        $.ajax({
            url: `json/data.json?page=${page}`,
            method: 'get',
            async: false,
            dataType: 'json',
            success: result => {
                imgData = result;
            }
        });
    };
    queryData();

    //2.数据绑定
    let bindHTML = () => {
        let $boxList = $('.flowBox > li');
        for (let i = 0; i < imgData.length; i += 3) {
            $boxList.sort((a, b) => {
                return $(a).outerHeight() - $(b).outerHeight();
            }).each((index, curLi) => {
                let item = imgData[i + index];
                if (!item) return;
                let {id, pic, link, title} = item;
                $(`<a href="${link}">
                    <div><img src="${pic}" alt=""></div>
                    <span>${title}</span>
                </a>`).appendTo($(curLi));
            });
        }
        isRun = false;
    };
    bindHTML();
    
    //3.当滚动到页面底部的时候，加载下一页的更多数据
    $(window).on('scroll', () => {
        let winH = $(window).outerHeight(),
            pageH = document.documentElement.scrollHeight || document.body.scrollHeight,
            scrollT = $(window).scrollTop();
        if ((scrollT + 100) >= (pageH - winH)) {
            if (isRun) return;
            isRun = true;
            if (page > 5) {
                alert('没有更多数据了');
                return;
            }
            queryData();
            bindHTML();
        }
    });
});

$(window).on('scroll', () => {
        let winH = $(window).outerHeight(),
            pageH = document.documentElement.scrollHeight || document.body.scrollHeight,
            scrollT = $(window).scrollTop();
        //=>卷去的高度 大于 真实高度-一屏幕高度：距离底下还有100PX，我们让其开始加载更多的数据
        if ((scrollT + 100) >= (pageH - winH)) {
            //隐性问题：认为操作滚动，这个在同一个操作内会被触发N次，也就是同一个时间段，获取数据会被执行N次，此时我们需要做“重复操作限定”
            if (isRun) return;
            isRun = true;//=>开始进行新一轮处理了

            if (page > 5) {
                alert('没有更多数据了');
                return;
            }

            queryData();
            bindHTML();
        }
    });