例子

1.实现一个瀑布流

<style>
        *{margin:0;padding:0}
        .item img{
            width:240px;
            padding:10px;
        }
        .item{
            border:1px solid #eee;
            float: left;
            font-size: 0;
        }
    </style>

<div id="app">
        <div class="item"><img src="images/01.jpg" alt=""></div>
        <div class="item"><img src="images/02.jpg" alt=""></div>
        <div class="item"><img src="images/03.jpg" alt=""></div>
        <div class="item"><img src="images/04.jpg" alt=""></div>
        <div class="item"><img src="images/05.jpg" alt=""></div>
        <div class="item"><img src="images/06.jpg" alt=""></div>
        <div class="item"><img src="images/07.jpg" alt=""></div>
        <div class="item"><img src="images/08.jpg" alt=""></div>
        <div class="item"><img src="images/09.jpg" alt=""></div>
        <div class="item"><img src="images/10.jpg" alt=""></div>
        <div class="item"><img src="images/11.jpg" alt=""></div>
        <div class="item"><img src="images/12.jpg" alt=""></div>
    </div>
    <script>
        /* 1.得到一排能放置几个元素 */
        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){
                var height =  $(value).outerHeight();
                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();
            }
        })
    </script>

2.瀑布流下拉刷新

 <script>
                http();
                $(window).scroll(function(){
                    if(isReachbottom()){
                        http();
                    }
                })
                 function http(){
                 var url = "http://192.168.4.18:8000/more";
                 $.ajax({
                    url,
                    method: "get",
                    success: res => {
                        res.forEach(item => {
                            var { imageUrl } = item;
                            var html = `                 
                    <div class="item"><img src=${imageUrl} alt=""></div>             
                    `
                            $("#app").append(html);
                        })
                        setTimeout(sortBox,100)
                    }
                })
                 }
                function sortBox(){
                //1.得到一排能放置几个元素
                var ww=$(window).width();//获取浏览器窗口宽度
                var box=$(".item").outerWidth();//获取盒子的宽度，outerWidth包含盒子内容区，填充，边框
                var num=Math.floor(ww/box);//一排能放几个图片
                console.log(num);
                //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{
                        //将元素放置在最小高度
                        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();
                return (scrollTop + availHeight) > dw - 100 ? true : false;
               }
            </script>

3.实现网易云下拉刷新

封装的js

function http({
    offset=0,
    success
}){
    var url =`http://192.168.4.18:3000/top/playlist?cat=华语&limit=20&offset=${offset}`
    $.ajax({
        url,
        success:res=>{
            success(res)
        }
    })
}

html代码

<style>
        .item img{
            width: 150px;
            height: 150px;
            padding: 5px;
        }
        .item{
            border:1px solid #eee;
            float:left;
            margin-right: 80px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div id="app">
    </div>
    <script>
        loadData()
        jump();
        $(window).scroll(function(){
            if(isReachBottom()){
                var offset=$(".item").length;
                loadData(offset)
            }
        })
        function jump() {
            setTimeout(() => {
                $(".item").click(function (event) {
                   let aid = event.currentTarget.dataset.aid;
                   location.href = `2.detail.html?id=${aid}`
                })
            }, 200)
        }
        function isReachBottom(){
            var scrollTop=$(window).scrollTop();//获取滚动条距离顶部的高度
            var availHeight=$(window).height();//获取可视区的高度
            var dh=$(document).height();//获取当前文档的高度
            return (scrollTop+availHeight==dh)?true:false;
        }
        function loadData(offset){
        http({
            offset,
            success:res=>{
                var playlists=res. playlists;
                playlists.forEach(item=>{
                //    console.log(playlists);
                var html=`
                <div class="item" data-aid=${item.id}>
                    <img src=${item.coverImgUrl}>
                    </div>
               `
                $("#app").append(html)
                })
            }
        })
    }
    </script>