JQ实现瀑布流布局 + 懒加载

示例：

思路：

1.所有图片保证宽度一致，接着确定展示几列，第一排使用 float:left 实现排序
2.如下图我们总共展示4列图片，从第二排开始我们按序通过定位把图片放在4列中、整列图片高度累加之和最小列的下方。如下图数字代表的就是图片码放的顺序

代码：

1.css 和 html,图省事直接放的img标签

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .parentBox {
            height: 100%;
            margin: 0 auto;
            position: relative;
            margin-top: 10px;
        }

        .parentBox img {
            width: 100px;
            height: aotu;
            float: left;
            display: block;
        }
    </style>
</head>

<body>
    <div class="parentBox">
        <img src="http://via.placeholder.com/100x120"><img src="http://via.placeholder.com/100x80">
        <img src="http://via.placeholder.com/100x150"><img src="http://via.placeholder.com/100x100">
        <img src="http://via.placeholder.com/100x120"><img src="http://via.placeholder.com/100x110">
        <img src="http://via.placeholder.com/100x160"><img src="http://via.placeholder.com/100x70">
        <img src="http://via.placeholder.com/100x50"><img src="http://via.placeholder.com/100x110">
        <img src="http://via.placeholder.com/100x160"><img src="http://via.placeholder.com/100x60">
        <img src="http://via.placeholder.com/100x80"><img src="http://via.placeholder.com/100x110">
        <img src="http://via.placeholder.com/100x160"><img src="http://via.placeholder.com/100x100">
        <img src="http://via.placeholder.com/100x50"><img src="http://via.placeholder.com/100x110">
        <img src="http://via.placeholder.com/100x160"><img src="http://via.placeholder.com/100x30">
        <img src="http://via.placeholder.com/100x90"><img src="http://via.placeholder.com/100x110">
        <img src="http://via.placeholder.com/100x160"><img src="http://via.placeholder.com/100x80">
        <img src="http://via.placeholder.com/100x50"><img src="http://via.placeholder.com/100x110">
        <img src="http://via.placeholder.com/100x160"><img src="http://via.placeholder.com/100x30">
        <img src="http://via.placeholder.com/100x200">
    </div>
</body>
</html>

2.JS排序图片

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $(function () {
        //@params {parentBox}  [父元素dom]
        //@params {imgArr}     [图片dom数组]
        //@params {otherWidth} [间距]
        //@params {columnNum}  [指定的列数]

        function WaterFall(parentBox, imgArr, otherWidth, columnNum) {

            //1.获取浏览器视口宽度 除以 单个图片的宽度(包括间距) 获得列数
            let windowWidth = $(window).width() //浏览器视口宽度
            let singleWidth = imgArr[0].offsetWidth //单个图片宽度
            columnNum ? columnNum : columnNum = ~~(windowWidth / (singleWidth + otherWidth))

            //2.把一排图片包括间距所需的总宽度赋值给水平居中的父盒子(高舒适完全贴合~)
            let parentBoxWidth = (columnNum - 1) * otherWidth + columnNum * singleWidth
            parentBox.css({ width: parentBoxWidth })

            //3.创建一个数组记录每列的图片所占的高度
            let heightGroup = new Array()

            //4.遍历图片DOM数组
            for (var i = 0; i < imgArr.length; i++) {
                if (i < columnNum) { //5-1.这里匹配到的是第一排的图片，记录第一排每一列的高度存储到 heightGroup 中
                    heightGroup.push(imgArr[i].offsetHeight)
                    if (i > 0) {//5-2.给第一排图片除第一张外的图片添加左间距
                        imgArr[i].style.cssText = `padding-left:${otherWidth}px;`
                    }
                } else {//6-1.这里匹配到的是第一排之后所有的图片，开始给图片指定位置摆放
                    //6-2.找到当前高度最小的列的索引赋值给 minIndex
                    this.minIndex = heightGroup.findIndex((item) => {
                        return item == Math.min.apply(null, heightGroup)
                    })
                    this.currentPositionLeft = this.minIndex * (singleWidth + otherWidth)//6-3.获取到 left 的值
                    this.currentDomHeight = imgArr[i].offsetHeight//6-4.获取当前图片的高度用以更新 heightGroup
                    imgArr[i].style.cssText = `position: absolute;left:${this.currentPositionLeft}px;top:${heightGroup[this.minIndex] + otherWidth}px`
                    heightGroup[this.minIndex] += this.currentDomHeight + otherWidth//6-5.更新 heightGroup
                }
            }
        }

        let parentBox = $('.parentBox')
        let imgArr = $('.parentBox img')

        //调用函数排列图片
        WaterFall(parentBox, imgArr, 6)

        //窗口尺寸变化时 重新获取当前DOM 调用 WaterFall
        $(window).resize(() => {
            parentBox = $('.parentBox')
            imgArr = $('.parentBox img')
            WaterFall(parentBox, imgArr, 6)
        })

        //模拟获取到的图片数据
        let data = [
            '<img src="http://via.placeholder.com/100x30">',
            '<img src="http://via.placeholder.com/100x50">',
            '<img src="http://via.placeholder.com/100x110">',
            '<img src="http://via.placeholder.com/100x160">'
        ]
        //懒加载 重新获取当前DOM 调用 WaterFall
        $(window).scroll(() => {
            let lastDom = $($('.parentBox img')[$('.parentBox img').length - 1])
            //滚动加载
            if ($('html').scrollTop() + $(window).height() > lastDom.offset().top) { //最后一张图片进入窗口
                for (let index = 0; index < data.length; index++) {
                    parentBox.append(data[index])
                }
                WaterFall(parentBox, $('.parentBox img'), 6)
            }
        })
    })
</script>

JQ实现瀑布流布局 + 懒加载

示例：

思路：

代码：

柚子硕

引用和评论

提高WEB安全性方法

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合