2.豆瓣电影--下拉刷新

http.js

var url ="https://douban-api.uieee.com/v2/movie/top250";
function http({type="get",callback,data={}}){
    $.ajax({
        url,
        data,
        type,
        dataType:"jsonp",
        success: function(res) {
            callback(res)
        }
    })
}
function onReachBottom(){
    var dh = $(document).height();
    var sh = $(window).scrollTop();
    var wh = $(window).height();
    return (Math.ceil(sh + wh) == dh) ? true : false;
}

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="lib/http.js"></script>
    <style>
        #app {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
</style>

<div id="app">
    </div>
    <script>
        var start = 0;
        http({
            data: {
                start
            },
            callback: handleData
        })
        function handleData(res) {
            var subjects = res.subjects;
            var movies = [];
            for (var i = 0; i < subjects.length; i++) {
                var obj = {}
                obj.title = subjects[i].title;
                obj.imageUrl = subjects[i].images.small;
                movies.push(obj)
            }
            for (var j = 0; j < movies.length; j++) {
                var item = $(`<div class="item"><img src="${movies[j].imageUrl}"/><p>${movies[j].title}</p></div>`)
                $("#app").append(item)
            }
            $(window).scroll(function(){
                if(onReachBottom()){
                    start+=20;
                    http({
                        data:{
                            start
                        },
                        callback:handleData
                    })
                }
            })
        }
    </script>