JQ手写瀑布流

<!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>
     
    </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;
}

//js
$(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();
        }
    });
});

猜你喜欢