当点击每一个div会往后端发送数据，每一次出现十条，当滚动向下的时候再加载剩下的

<div>全部</div>
<div>演唱会</div>
<div>音乐会</div>
<div>话剧歌剧</div>
<div>儿童亲子</div>
<div>音乐剧</div>
<div>戏曲综艺</div>
<div>展览</div>
<div>舞蹈芭蕾</div>

//以下是对主要演出信息发起数据的全局变量
var clickFlag = {//给每一个标题都设置一个开关
    0: true,
    1: true,
    2: true,
    3: true,
    4: true,
    5: true,
    6: true,
    7: true,
    8: true
};
var scrollTitFlag = {//给每一个滚动的标题设置一个开关
    0: true,
    1: true,
    2: true,
    3: true,
    4: true,
    5: true,
    6: true,
    7: true,
    8: true
}
var curId;//当前点击的id
var lastId;//上一次点击的id
var page = 0;//滚动加载的页数
var scrollFlag = true;//滚动加载的开关
var arrObj = {};//存储每一次发起Ajax的数据
//封装Ajax函数
function ajax(url, data, fun) {
    $.ajax({
        type: "get",
        url: url,
        data: data,
        dataType: "json",
        success: function (data) {
            fun(data);
        }
    })
}
//封装ejs渲染数据的函数
function ejsFun(data) {
    var html = ejs.render($("#show").html(), { data: data });
    $(".main ul").html(html)
}
//封装让ul和加载图片出现或消失的函数
function ImgUlForm(imgForm, ulForm) {
    $(".loading img").css("display", imgForm);
    $(".main ul").css("display", ulForm);
}
//封装第一次发送Ajax的发送函数
function firstSendAjax() {
    ajax("./api/show.php", "classifyId=" + curId + "&page=0", function (data) {
        ImgUlForm("none", "block")//让ul和加载图片出现或消失的函数
        arrObj[curId] = data.data;//把数据存到相对应这个标题的数组中
        ejsFun(arrObj[curId]);//ejs渲染
        lastId = curId;//本次点击的id变成上一次的
    })
}
//当点击导航栏的时候出现的效果
function clickFun() {
    $("nav .nav-box div").click(function () {
        ImgUlForm("block", "none")//让ul和加载图片出现或消失的函数
        //获取data-id的值
        curId = $(this).data("id");//当前点击的id
        localStorage.id = curId;//每次点击都把本地存储的id变成当前点击的id
        if (curId != lastId) {//如果点击的是不同的标题再把page初始化，开关打开，如果是相同的标题滚动就不再发起Ajax
            page = 0;
            scrollFlag = true;//每次点击就要把page变为0，滚动的开关打开
        }
        if (clickFlag[curId]) {//点击的时候先看看开关，如果开着就说明是第一次点击
            clickFlag[curId] = false;//只要进来。就把相对应的标题的开关关上，以后再点击就不发起Ajax
            //如果是第一次点击发送Ajax，往后点击不再发送
            firstSendAjax();
            $(".loading a").css("display","none");//每次第一次点击都让没有更多了这几个字消失
        } else {//如果不是第一次点击，就直接把之前存入这个标题相对应的数组中的数据拿出来
            ImgUlForm("none", "block")//让ul和加载图片出现或消失的函数
            ejsFun(arrObj[curId]);//ejs渲染
        }
        $(this).addClass("active").siblings().removeClass("active");
    })
}
clickFun();
//当滚动的时候加载的函数
function scrollLoad() {
    //当滚动的时候加载
    var offsetTop = $(".main")[0].offsetTop;
    var windowH = $(window).height();
    window.addEventListener("scroll", function () {
        //当页面向下拉的时候出现懒加载
        var scrollTop = $(window).scrollTop();
        var height = $(".main").height();
        if (scrollTop + windowH >= offsetTop + height) {
            if (scrollFlag && scrollTitFlag[curId]) {//只有滚动开关和当前标题的滚动开关都打开才发起请求
                $(".loading img").css("display", "block").siblings().css("display", "none");//图片出现，文字消失
                scrollFlag = false;//只要进来就把开关关上，以防新的内容还没有渲染就再次发起Ajax请求
                page++;
                ajax("./api/show.php", "classifyId=" + curId + "&page=" + page, function (data) {
                    if (data.status) {
                        data.data.forEach(function (item) {
                            arrObj[curId].push(item);
                        })//把得到的数据每一位都添加到相对应的数组中
                        ejsFun(arrObj[curId]);//ejs渲染
                        scrollFlag = true;
                    } else {
                        scrollTitFlag[curId] = false;//当没有数据的时候就把这个标题的滚动开关关上，再次点击这个标题的时候就不再滚动加载
                        $(".loading a").css("display", "block").siblings().css("display", "none");//文字出现，图片消失
                    }
                })
            }
        }
    }, false)
}
scrollLoad();