1.算法逻辑

1.算法逻辑

第一步:加载图片,全部浮动布局 —> 第二步:获取第一排能放下的图片的个数. —>第三步:遍历图片,若是第一排,记录第一排图片的高度,添加到一个数组.—> 第四步:若是第二排,找到数组中最小高度,记录他的下标值,并且获取它的左偏移量,从第二排开始,将图片添加到数组中最小高度的对应的图片的下方(相对定位,通过left和top),重置数组中高度的最小值. —> 第五步:获取已经翻到的位置的顶部偏移量(等于滚动轴高度+当前可视窗口高度.)若是接近整个文档流的底部200px,则执行第一二三四步.
代码:
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>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/index.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="main">
    </div>
</body>
</html>

css:

*{padding: 0;margin: 0;}
.main{
    overflow: hidden;
}
.item{
    font-size: 0;
    float: left;
    padding: 20px;
    border: 1px solid #666;
}
.item img{
    width: 200px;
}

js:

$(function () {
    axios({
        method: 'get',
        url: "http://192.168.4.18:8000/more",
    })
        .then(function (res) {
            deal(res)

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

    function deal(res){
        res.data.forEach(element => {
            var htmls = `
        <div class="item">
            <img src=${element.imageUrl} alt="">
        </div>
        `
            $(".main").append(htmls);
        });

        // 获取一排能放几个
        var ww = $(window).width();
        var xw = $(".item").outerWidth();
        var max = Math.floor(ww / xw);
        // console.log(max);
        var arr = [];

        //遍历item
        setTimeout(function () {
            $(".item").each(function (index, element) {
                var height = $(this).outerHeight();
                if (index < max) {
                    arr.push(height);
                } else {
                    console.log(arr);
                    var heightMin = Math.min(...arr);
                    var minIndex = arr.indexOf(heightMin)
                    var left = $(".item").eq(minIndex).offset().left;
                    $(this).css({ position: "absolute", left: left, top: heightMin });
                    arr[minIndex] = heightMin + $(this).outerHeight();
                }
            });
        }, 100)
    }
})

Javascrip

1.瀑布流

1.算法逻辑