例子

1.瀑布流

<script>
        http();
        $(window).scroll(function () {
            console.log(isReachBottom());
            if (isReachBottom()) {
                http();
            }
        })
        function http() {
            var url = "http://192.168.4.18:8000/more"
            $.ajax({
                url,
                type: "get",
                success: res => {
                    console.log(res);
                    res.forEach(item => {
                        var html = `
                            <div class="item"><img src=${item.imageUrl} alt=""></div>
                        `
                        $("#app").append(html);
                    })
                    setTimeout(Data, 100)
                }
            })
        }
        /* 1.得到一排能放几个元素 */
        function Data() {
            var ww = $(window).width();
            var box = $(".item").outerWidth();
            var num = Math.floor(ww / box);
            /* 2.定义一个数组获取第一排元素的height */
            var arr = [];
            $(".item").each((index, value) => {
                if (index < num) {
                    console.log(value);
                    var height = $(value).outerHeight()
                    console.log(height);
                    arr.push(height)
                }
                else {
                    /* 3.将元素放置在最小高度的位置  同时将数组重置  */
                    var minHeight = Math.min(...arr);
                    var index = arr.indexOf(minHeight);
                    var offsetLeft = $(".item").eq(index).offset().left;
                    $(value).css({ position: "absolute", left: offsetLeft, top: minHeight });
                    arr[index] = minHeight + $(value).outerHeight();
                }
            })
        }
        function isReachBottom() {
            var scrollTop = $(window).scrollTop();  //获取滚动条距离顶部的距离
            var availHeight = $(window).height();   //获取可视区的高度
            var dw = $(document).height();  // 获取内容区域的高度
            console.log(scrollTop);
            console.log(availHeight);
            console.log(dw);
            var sum = scrollTop + availHeight;
            console.log(sum);
            return sum > dw - 200 ? true : false;
            Data();
        }
    </script>

2.点击切换

 <p>
        <a href="#html">html</a>
        <a href="#css">css</a>
        <a href="#js">javascript</a>
    </p>
    <div id="html">
        html
    </div>
    <div id="css">
        css
    </div>
    <div id="js">
        javascript
    </div>
    <script>
        $("a").click(function(){
            var id=$(this).attr("href");
            var offsetTop=$(id).offset().top;
            console.log(offsetTop);
            $("html,body").animate({
                scrrollTop:offsetTop
            })
            return false;
        })
    </script>

3.下拉刷新

<script>
        /* 初始化数据 */
        loadData()
        jump();
        /* 下拉刷新加载的数据 */
        $(window).scroll(function () {
            if (isReachBottom()) {
                var offset = $(".item").length;
                loadData(offset);
            }
        })
        /* 自定义传值 */
        function jump(){
            setTimeout(()=>{
                $(".item").click(function(event){
                    let aid=event.target.dataset.aid;
                    location.href=`detail.html?id=${aid}`
                })
            },300)
        }
        function isReachBottom() {
            var scrollTop = $(window).scrollTop();
            var availHeight = $(window).height();
            var dh = $(document).height();
            console.log(scrollTop + availHeight)
            return (scrollTop + availHeight == dh) ? true : false;
        }
        function loadData(offset){
            http({
            offset,
            success: res => {
                res.playlists.forEach(item => {
                    var template = `
                         <div class="item">
                            <img src=${item.coverImgUrl}>
                         </div>   
                      `
                    $("#app").append(template)
                })
            }
        })
        }
    </script>