jQuery瀑布流（一看就懂）

最新推荐文章于 2024-08-27 15:49:16 发布

星辰呀

最新推荐文章于 2024-08-27 15:49:16 发布

阅读量2.4k

点赞数 6

文章标签： jquery html5 javascript

本文链接：https://blog.csdn.net/weixin_60659070/article/details/120709383

版权

瀑布流可以使用JavaScript实现，今天我把使用jQuery方法实现瀑布流分享出来，供大家参考。

什么是瀑布流？

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

准备工作：

工具：Visual Studio Code
HTMl页面（waterfall.html文件）
css文件（waterfall.css文件）
js文件（waterfall.js文件）
jquery的工具包：我在这里使用的是jquery-3.6.0.js 的工具包

一、在html文件的head标签中引入css、JS、jq工具包

二、准备html页面

<body>
    <div class="main">
        <div class="box">
            <div class="content"><img src="./img/1.jpg" alt=""></div>
        </div>
        <div class="box">
            <div class="content"><img src="./img/2.jpg" alt=""></div>
        </div>
        <div class="box">
            <div class="content"><img src="./img/3.jpg" alt=""></div>
        </div>
        <div class="box">
            <div class="content"><img src="./img/4.jpg" alt=""></div>
        </div>
        <div class="box">
            <div class="content"><img src="./img/5.jpg" alt=""></div>
        </div>
        <div class="box">
            <div class="content"><img src="./img/6.jpg" alt=""></div>
        </div>
        <div class="box">
            <div class="content"><img src="./img/7.jpg" alt=""></div>
        </div>
        <div class="box">
            <div class="content"><img src="./img/8.jpg" alt=""></div>
        </div>
        <div class="box">
            <div class="content"><img src="./img/9.jpg" alt=""></div>
        </div>
        <div class="box">
            <div class="content"><img src="./img/10.jpg" alt=""></div>
        </div>
    </div>
</body>

三、准备css样式

* {
    margin: 0;
    padding: 0;
}

.box {
    position: relative;
    float: left;
}

.content {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
}

.content img {
    width: 358px;
    height: auto;
}

四、js部分

一、确定图片位置的摆放

根据瀑布流的效果，我们要知道：

等宽的图片在页面中横向一排能放多少张图片
根据瀑布流的效果得知：第二排的第一张图片要放在第一排当中图片高度最小的图片的正下方

代码：

function putPicture() {
    //获取盒子
    var box = $('.box');
    //获取图片的宽度
    var boxWidth = box.eq(0).width();
    // 获取每一行摆放图片的个数
    // 1.获取页面的宽
    var documentWidth = $(document).width();
    // 2. 计算个数
    var num = Math.floor(documentWidth / boxWidth);
    // 定义一个 存放高度的数组
    var boxArr = [];
    // 获取每个盒子的高度
    box.each(function (index, value) {
        // 获取高度
        var boxHeight = box.eq(index).height();
        // 把第一行盒子的高度放进数组中
        if (index < num) {
            boxArr[index] = $(this).height();
        } else { // 从第二行开始
            // 获取第一行的最小高度
            var minBoxHeight = Math.min.apply(this, boxArr);
            // 获取最小高度在数组内的索引
            var minIndex = $.inArray(minBoxHeight, boxArr);
            //设置这张图片的位置
            $(value).css({
                'position': 'absolute',
                'top': minBoxHeight,
                'left': box.eq(minIndex).position().left
            });
            // 重新计算最小盒子高度
            boxArr[minIndex] += $(this).height();
        };

    })

二、滚动加载

1.监听鼠标的滚动事件

window.onscroll = function(){

}

2.确定加载的节点

当加载节点的位置距离页面顶部的距离 < 页面可视窗口的高度 + 鼠标滚动的距离时加载图片否则，不加载图片

代码：

function scrollLoad() {
    // 获取盒子对象
    var box = $('.box');
    // 获取最后一个盒子
    var lastBox = box.last().get(0);
    // 节点位置： 最后一张图片完全看见
    // 获取节点图片距离顶部的距离
    var lastBoxTop = lastBox.offsetTop;
    // 获取节点位置距离节点图片上边框的高度
    var nodeBoxHeight = box.last().height() / 1.1;
    //获取节点位置距离顶部的高度
    var nodeOffsetHeight = nodeBoxHeight + lastBoxTop;

    // 获取页面窗口的高度
    var documentHeight = $(window).height();
    // 获取混动条滚动的距离
    var scrollHeight = $(window).scrollTop();
    //当  加载节点的位置距离页面顶部的距离  <  页面可视窗口的高度 + 鼠标滚动的距离  时返回true允许加载，否则，返回false，不允许加载
    return (nodeOffsetHeight < documentHeight + scrollHeight) ? true : false
}

3.加载图片

3.1 模拟加载数据

  var dataImg = {
        "data": [{
            'src': '1.jpg'
        }, {
            'src': '2.jpg'
        }, {
            'src': '3.jpg'
        }, {
            'src': '4.jpg'
        }, {
            'src': '5.jpg'
        }]
    }

3.2、加载图片

 window.onscroll = function () {
        if (scrollLoad()) {
            $.each(dataImg.data, function (index, value) {
                var box = $('<div></div>').addClass('box').appendTo($('.main'))
                var content = $('<div></div>').addClass('content').appendTo(box)
                $('<img>').attr('src', './images/' + $(value).attr('src')).appendTo(content)
            })
            putPicture()
       }
}

五、完成jquery实现瀑布流的完整js代码

$(document).ready(function () {
    // 摆放图片
    putPicture();

    // ------滚动加载-------
    //模拟从加载图片的数据
    var dataImg = {
        "data": [{
            'src': '1.jpg'
        }, {
            'src': '2.jpg'
        }, {
            'src': '3.jpg'
        }, {
            'src': '4.jpg'
        }, {
            'src': '5.jpg'
        }]
    };
    // 滚动加载
    window.onscroll = function () {
        if (scrollLoad()) {
            $.each(dataImg.data, function (index, value) {
                var box = $('<div></div>').addClass('box').appendTo($('.main'));
                var content = $('<div></div>').addClass('content').appendTo(box);
                $('<img>').attr('src', './images/' +                         
                                 $(value).attr('src'))
                                 .appendTo(content);
            });
            putPicture();
        };
    };
});

//确定节点函数
function scrollLoad() {
    // 获取盒子对象
    var box = $('.box');
    // 获取最后一个盒子
    var lastBox = box.last().get(0);
    // 节点位置： 最后一张图片完全看见
    // 获取节点图片距离顶部的距离
    var lastBoxTop = lastBox.offsetTop;
    // 获取节点位置距离节点图片上边框的高度
    var nodeBoxHeight = box.last().height() / 1.1;
    //获取节点位置距离顶部的高度
    var nodeOffsetHeight = nodeBoxHeight + lastBoxTop;

    // 获取页面窗口的高度
    var documentHeight = $(window).height();
    // 获取混动条滚动的距离
    var scrollHeight = $(window).scrollTop();
    return (nodeOffsetHeight < documentHeight + scrollHeight) ? true : false
};

// 摆放图片函数
function putPicture() {
    //获取盒子
    var box = $('.box');
    //获取图片的宽度
    var boxWidth = box.eq(0).width()
    // 获取每一行摆放图片的个数
    // 1.获取页面的宽
    var documentWidth = $(document).width();
    // 2. 计算个数
    var num = Math.floor(documentWidth / boxWidth);

    // 存放高度的数组
    var boxArr = []
    // 获取每个盒子的高度
    box.each(function (index, value) {
        // 获取高度
        var boxHeight = box.eq(index).height();
        // 把第一行盒子的高度放进数组中
        if (index < num) {;
            boxArr[index] = $(this).height();;
        } else {
            // 获取第一行的最小高度
            var minBoxHeight = Math.min.apply(this, boxArr);
            // console.log('minBoxHeight', minBoxHeight);
            // 获取最小高度在数组内的索引
            var minIndex = $.inArray(minBoxHeight, boxArr);
            $(value).css({
                'position': 'absolute',
                'top': minBoxHeight,
                'left': box.eq(minIndex).position().left
            });
            // 重新计算最小盒子高度
            boxArr[minIndex] += $(this).height();
        };

    });
};