案例——瀑布流（JS实现 / JQ）

最新推荐文章于 2024-06-22 15:10:18 发布

、小会

最新推荐文章于 2024-06-22 15:10:18 发布

阅读量125

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/gmh1118/article/details/113790741

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述
代码
html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/baseCss.css">
    <link rel="stylesheet/less" href="css/index.less">
    <script src="js/less.min.js"></script>
</head>

<body>
    <div class="content">
        <ul class="flowBox">
            <li>

            </li>
            <li>

            </li>
            <li>

            </li>
        </ul>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/index1.js"></script>


</body>

</html>

css

@import (reference) "common";
.content {
    width: 1000px;
    margin: 20px auto;
    ul{
        //对浮动元素的父级添加overflow：hidden解决子盒子无法撑开父盒子的问题
        overflow: hidden;
        
        li{
            @W:300px;
            float: left;
            width: @W;
            margin-right: 50px;
            &:nth-of-type(3n){
                margin-right: 0;
            }
            a{
                display: block;
            border: 1px solid lightseagreen;
            border-radius: 0 0 20px 20px ;
                margin-bottom: 20px;
                &:hover{
            box-shadow: 1px 1px 10px rgba(0,0,0,.3);

                }
                div{
                    width: @W;
                    img{
                        width: @W;
                    }
                }   
                span{
                    display: block;
                    line-height: 20px;
                    margin: 5px 0;

                    padding: 0 10px;
                    font-size: 12px;
                    color: #9e7e6b;
                }

            }
            
        }
    }
}

$(function($) {
    let imgData = null,
        page = 0,
        isRun = false;
    let queryData = () => {
        page++
        //参数忘了
        $.ajax({
            method: 'get',
            url: `json/data.json?page=${page}`,
            async: false,
            dataType: 'json',
            success: result => {
                imgData = result;
            }
        });
    };
    let bindHTML = () => {
        // let $boxList = $('.flowBox > li'),
        //     boxList = [].slice.call($boxList);
        // let queryHTML = ({ id, content, img } = {}) => {
        //     if (typeof id === "undefined") {
        //         return '';
        //     }
        //     return `<a href="#">
        //          <div><img src="${img}" alt=""></div>
        //          <span>${content}</span>
        //      </a>`;
        // };
        // for (let i = 0; i < imgData.length; i += 3) {
        //     let item0 = imgData[i],
        //         item1 = imgData[i + 1],
        //         item2 = imgData[i + 2];

        //     boxList.sort((a, b) => {
        //         return a.offsetHeight - b.offsetHeight;
        //     });
        //     boxList.forEach((item, index) => {
        //         item.innerHTML += queryHTML(eval('item' + index));
        //     });
        // }
        // isRun = false;
        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 {
                    content,
                    img
                } = imgData[i + index];
                $(`<a href="#">
                <div><img src="${img}" alt=""></div>
                <span>${content}</span>
            </a>`).appendTo(curLi);
            });
        }
        isRun = false;
    };
    let scrollBottom = () => {
        $(window).on('scroll', () => {
            let pageH = document.documentElement.scrollHeight || document.body.scrollHeight,
                winH = $(window).outerHeight(),
                scrollT = $(window).scrollTop();
            if ((scrollT + winH + 100) >= pageH) {
                if (isRun) return;
                isRun = true;
                if (page > 3) {
                    alert('没有更多数据了');
                    return;
                }
                queryData();
                bindHTML();
            }
        });
    };
    queryData();
    bindHTML();
    scrollBottom();

});

、小会

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案例——瀑布流（JS实现 / JQ）

效果图代码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Document</title> <link rel="stylesheet" href="css/baseCss
复制链接

扫一扫