1.判断一排能放下几个
1-1 获取窗口的width
1-2 获取盒子的width
num = window/box

2.根据第一排的高去放第二排
2-1从最小高度开始放 arr

api

width —>content
outerWidth—>content,padding,border

 改变css样式
 $(element).css({attr:value})**

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  8. </head>
  9. <style>
  10.     *{
  11.         margin: 0;
  12.         padding:0;
  13.     }
  14.     div.item{
  15.         width: 100px;
  16.         height: 100px;
  17.         border: 1px solid #333;
  18.         padding:20px;
  19.         float: left;
  20.     }
  21.     #app{
  22.         margin:0 auto;
  23.     }
  24. </style>
  25. <body><div id="app">
  26.     <div class="item"></div>
  27.     <div class="item"></div>
  28.     <div class="item"></div>
  29.     <div class="item"></div>
  30.     <div class="item"></div>
  31.     <div class="item"></div>
  32.     <div class="item"></div>
  33.     <div class="item"></div>
  34.     <div class="item"></div>
  35. </div>
  36.     <script>
  37.                 /* 
  38.         width -->content
  39.         outerWidth-->content,padding,border
  40.          */
  41.         /* 
  42.         改变css样式
  43.         $(element).css({attr:value})
  44.          */
  45.         var ww = $(window).width();
  46.         var box = $(".item").outerWidth();
  47.         var num = Math.floor(ww/box);
  48.         $("#app").css({width:num*box+"px"})
  49.         console.log(ww)
  50.         console.log(box)
  51.         console.log(num);
  52.     </script>
  53. </body>
  54. </html>

获取元素距离窗口的距离

left: $(element).offset().left;
top: $(element).offset().top;
eq() 找到第几个元素

 var w = $(“.item”).offset().left;
 var h = $(“.item”).offset().top;
 console.log($(“.item”).eq(1));
 eq 第几个元素的**

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  8.     <style>
  10.         .item{
  11.             width:100px;
  12.             height: 100px;
  13.             margin:200px;
  14.             background-color: red;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <!-- 获取元素距离窗口的距离
  20.         left:  $(element).offset().left;
  21.         top:  $(element).offset().top;
  22.         eq()  找到第几个元素
  23.      -->
  24.     <div class="item">
  26.     </div>
  27.     <div class="item">
  29.     </div>
  30.     <div class="item">
  32.     </div>
  33.     <script>
  34.         // var w =  $(".item").offset().left;
  35.         // var h =  $(".item").offset().top;
  36.         console.log($(".item").eq(1));
  37.         /* eq 第几个元素的 */
  38.     </script>
  39. </body>
  40. </html>

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        *{margin:0;padding:0}
        .item img {
            width:240px;
            padding:5px;
            vertical-align: bottom;
        }
        .item{
            float: left;
            border:1px solid #eee;
        }
    </style>
</head>
<body>
    <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);
        var  arr = []  //
        /* 2.将第一排的高度放在一个数组中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>
</body>
</html>

判断滚动条是否到达底部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        *{margin:0;padding:0}
        body{
            height: 2000px;
            background: #ff2d51 url("images/webp.webp") no-repeat;
        }
    </style>
</head>
<body>
    <!-- 
        判断滚动条是否到达底部
     -->
    <script>
        $(window).scroll(function(){
            var scrollTop =  $(window).scrollTop(); //获取滚动条距离顶部的高
            var availHeight =  $(window).height(); //获取可视区域的高
            var dw = $(document).height();  //获取内容区域的高
            console.log(dw)
            /* 滚动条的高度+可视区域的height = 内容区域的高度 */
        })
        function isReachBottom(){

        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        body {
            height: 2000px;
            background: #ff2d51 url("images/webp.webp") no-repeat;
        }
    </style>
</head>

<body>
    <!-- 
        判断滚动条是否到达底部
     -->
    <script>

        $(window).scroll(function () {
            console.log(isReachBottom())
            if(isReachBottom()){
                /*发送http请求 */
            }
        })
        function isReachBottom() {
            var scrollTop = $(window).scrollTop(); //获取滚动条距离顶部的高
            var availHeight = $(window).height(); //获取可视区域的高
            var dw = $(document).height();  //获取内容区域的高
            return (scrollTop + availHeight) > dw -200 ? true : false;
        }
    </script>
</body>

</html>