jq实现瀑布流布局

最新推荐文章于 2023-05-29 23:38:41 发布
最新推荐文章于 2023-05-29 23:38:41 发布
阅读量456 收藏 1
点赞数
分类专栏： html+css+js 文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41855739/article/details/104028132
版权

jq实现瀑布流布局

效果图预览
在这里插入图片描述
实现思路：根据网页宽度计算好一排有多少列图片，设置一个空数组记录每一列的高度变化，根据比较每一列的高度大小依次给最短的那一列插入图片

html代码：

<body>
	<div class="waterfall-box"></div>
</body>

css代码：

		*{
            padding: 0;
            margin: 0;
        }
        body,.waterfall-box{
            width: 100%;
            height: 100%;
        }
        .img-item{
            display: flex;
            flex-direction: column;
            border-radius: 8px;
            overflow: hidden;
            position: absolute;
            background: #ffffff;
            box-shadow: 0 0 8px #ccc;
        }
        .img-item,.img-item img{
            width: 290px;
            height: auto;
            display: block;
        }
        .content{
            margin: 0 20px;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }
        .user-info{
            padding: 15px 20px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .user-info .userimg img{
            width: 40px;
            height: 40px;
            display: block;
            border-radius: 50%;
        }
        .info{
            margin: 0 0 0 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 14px;
        }
        .info span:nth-of-type(1){
            color: rgb(197, 120, 20);
        }
        .info span:nth-of-type(2){
            padding: 2px 6px;
            margin: 5px 0 0 0;
            color: rgb(255, 255, 255);
            background: rgb(236, 164, 70);
            border-radius: 20px;
            font-size: 12px;
        }

js代码：

// 瀑布流图片数组
    let img_arr = [
        'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2258625464,2556143219&fm=26&gp=0.jpg',
        'http://image.biaobaiju.com/uploads/20180802/00/1533140278-PKNWsLBzoa.jpg',
        'http://image.biaobaiju.com/uploads/20180802/00/1533140278-JjxDKCWseA.jpg',
        'http://image.biaobaiju.com/uploads/20180802/00/1533140278-oFRMxQtfkd.jpeg',
        'http://image.biaobaiju.com/uploads/20180801/23/1533136201-VtUkzgfLxA.jpg',
        'http://image.biaobaiju.com/uploads/20180801/23/1533136201-wUTXZRcgCp.jpg',
        'http://image.biaobaiju.com/uploads/20181007/15/1538896968-DCWLNoEUJQ.jpg',
        'http://image.biaobaiju.com/uploads/20181007/15/1538896972-fealVIJZhS.jpg',
        'http://image.biaobaiju.com/uploads/20181007/15/1538896972-izKDXVkJOq.jpg',
        'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2258625464,2556143219&fm=26&gp=0.jpg',
        'http://image.biaobaiju.com/uploads/20180802/00/1533140278-PKNWsLBzoa.jpg',
        'http://image.biaobaiju.com/uploads/20180802/00/1533140278-JjxDKCWseA.jpg',
        'http://image.biaobaiju.com/uploads/20180802/00/1533140278-oFRMxQtfkd.jpeg',
        'http://image.biaobaiju.com/uploads/20180801/23/1533136201-VtUkzgfLxA.jpg',
        'http://image.biaobaiju.com/uploads/20180801/23/1533136201-wUTXZRcgCp.jpg',
        'http://image.biaobaiju.com/uploads/20181007/15/1538896968-DCWLNoEUJQ.jpg',
        'http://image.biaobaiju.com/uploads/20181007/15/1538896972-fealVIJZhS.jpg',
        'http://image.biaobaiju.com/uploads/20181007/15/1538896972-izKDXVkJOq.jpg',
        'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2258625464,2556143219&fm=26&gp=0.jpg',
        'http://image.biaobaiju.com/uploads/20180802/00/1533140278-PKNWsLBzoa.jpg'
    ]
    // 上拉加载图片虚拟数据
    let data = [
        'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2258625464,2556143219&fm=26&gp=0.jpg',
        'http://image.biaobaiju.com/uploads/20180802/00/1533140278-PKNWsLBzoa.jpg',
        'http://image.biaobaiju.com/uploads/20180802/00/1533140278-JjxDKCWseA.jpg',
        'http://image.biaobaiju.com/uploads/20180802/00/1533140278-oFRMxQtfkd.jpeg',
        'http://image.biaobaiju.com/uploads/20180801/23/1533136201-VtUkzgfLxA.jpg',
        'http://image.biaobaiju.com/uploads/20180801/23/1533136201-wUTXZRcgCp.jpg',
    ]

    let win_width = $(window).width();                     //获取网页宽度
    let col_num = Math.floor(win_width / 310)              //根据网页宽度计算多少列图片
    let old_col_num = Math.floor(win_width / 310)          //记录列数改变前上一次是多少列图片（此变量用于窗口宽度大小发生改变时）
    let hei_arr = []            //记录每一列图片的总高度
    let resort = true           //网页窗口宽度改变后图片是否在重新排序的状态值
    let loading = true          //上拉加载的状态值
    
    // 重新计算图片列数
    resize();

    $(window).scroll(function(){
        let scroH = $(document).scrollTop(); //滚动条高度
        let viewH = $(window).height();  //可见高度 
        let contentH = $(document).height();  //内容高度
        // 当滚动条距离页面还有150px的时候加载图片
        if(scroH + viewH + 150 >= contentH && loading){
            // 修改加载状态
            loading = false
            // 在这里写ajax数据请求
            // 将获取到的谁数据插入原有的数组
            for(let i = 0;i < data.length; i++){
                img_arr.push(data[i])
            }
            // 将新请求得到的数据排列
            for(let i = 0;i < data.length; i++){
                insertImg((img_arr.length - data.length) + i)
            }
        }
    })

    // 重新计算图片列数
    function resize(){
        $(window).resize(function(){
            win_width = $(window).width();
            old_col_num = Math.floor(win_width / 310) == 0 ? 1 : Math.floor(win_width / 310)
            if(col_num !== old_col_num && resort == true){
                col_num = old_col_num
                resort = false
                // 重新给图片排序
                reSort()
            }
        })
    }

    // 首次加载页面
    for(let i = 0 ; i < img_arr.length; i++ ){
        if(i < col_num){
            let top = 18    //设置图片模板的向上偏移值为18
            let left = i == 0 ? 18 : 290 * i  + 18 * (i + 1)  //以18为基础值设置每个图片容器的向左偏移值
            // 制作图片模板
            module(img_arr[i],top,left,function(html){
                // 返回的模板追加到页面
                $('.waterfall-box').append(html)
                if(i == col_num - 1){
                    // 当第一排图片全部插入完毕后开始计算每一列的高度
                    caluation(col_num)
                }
            })
        }else{
            // 从第二排开始插入图片
            // 设置100毫秒的回调函数，预防图片过大加载过慢而都导致的无法获取图片宽高的问题
            setTimeout(function(){
                // 每次插入图片后给一个30毫秒的延迟
                setTimeout(function(){
                    insertImg(i)
                },30*i)
            },100) 
        }
    }

    // 第一行图片排列完成后计算每一列的高度
    function caluation(num){
        let arr = []
        for(let i = 0 ;i < num; i++){
            // 获取到每一个图片模板的高度，给山下两图片模板增加18px的间距
            let div_height = $('.img-item').eq(i).height() + 18
            arr.push(div_height)
            // 把第一排每一列的高度写进事先设置好的空数组
            hei_arr = arr
        }
    }

    // 插入图片
    function insertImg(idx){
        // 获取最小的高度值
        let min_height = Math.min.apply(null, hei_arr)
        // 获取最大的高度值
        let max_height = Math.max.apply(null, hei_arr)
        // 获取最小高度在数组里的下标
        let min_index = hei_arr.indexOf(min_height)
        let top = min_height + 18
        let left = min_index == 0 ? 18 : 290 * min_index  + 18 * (min_index + 1)
        module(img_arr[idx],top,left,function(html){
            $('.waterfall-box').append(html)
            let div_height = $('.img-item').eq(idx).height() + 18
            hei_arr[min_index] = hei_arr[min_index] + div_height
            if(idx == img_arr.length - 1){
                // 遍历到最后一张图片的时候
                // 图片可进行重新排列
                resort = true
                // 修改状态可在此加载数据
                loading = true
            }
        })
    }

    // 图片重新排序
    function reSort(){
        for(let i = 0; i < img_arr.length; i++){
            if(i < col_num){
                let top = 18
                let left = i == 0 ? 18 : 290 * i  + 18 * (i + 1)
                $('.img-item').eq(i).animate({"top": top + 'px',"left": left + 'px'},200,function(){})
                if(i == col_num - 1){
                    caluation(col_num)
                }
            }else{
                setTimeout(function(){
                    let min_height = Math.min.apply(null, hei_arr)
                    let max_height = Math.max.apply(null, hei_arr)
                    let min_index = hei_arr.indexOf(min_height)
                    let top = min_height + 18
                    let left = min_index == 0 ? 18 : 290 * min_index  + 18 * (min_index + 1)
                    let div_height = $('.img-item').eq(i).height() + 18
                    hei_arr[min_index] = hei_arr[min_index] + div_height
                    $('.img-item').eq(i).animate({"top": top + 'px',"left": left + 'px'},200,function(){
                        if(i == img_arr.length - 1){
                            resort = true 
                        }
                    })
                },80)
            }
        }
    }

    // 图片模板
    function module(img,top,left,fun){
        // img：图片链接
        // top：模板到页面顶端的偏移值
        // left：模板到页面顶端的偏移值
        // fun：回调函数
        let html = `
            <div class="img-item" style="top:` + top + `px;left:` + left + `px">
                <img src="`+ img +`">
                <div class="content">
                    这是一个瀑布流的例子
                    这是一个瀑布流的例子
                    这是一个瀑布流的例子
                </div>
                <div class="user-info">
                    <div class="userimg">
                        <img src="http://pic.qqtn.com/up/2017-11/2017112717262155194.png">
                    </div>
                    <div class="info">
                        <span>白纸一张</span>
                        <span>白纸一张的博客</span>
                    </div>
                </div>
            </div>
        `
        fun(html)
    }
白纸一张_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQ 用最少代码实现瀑布流布局
06-08
NULL 博文链接：https://onestopweb.iteye.com/blog/2328282
JQuery实现瀑布流布局
chen_ac的博客
06-26 678
JQuery实现瀑布流布局 瀑布流布局： 1、图片等宽不等高 2、定义规定列数，从第二行开始，图片插入高度最小的列中，依次类推 3、图片的父元素设置相对定位，图片元素设置绝对定位 index.html <head> <meta charset="UTF-8"> <title>JQuery---瀑布流布局</title> <style> * { margin: 0; padding: 0; }
jQuery特效：实现瀑布流
KaiSarH
03-01 505
jQuery实现瀑布流
基于jquery实现瀑布流布局
11-23
本文实例为大家介绍了基于jquery实现瀑布流布局的关键代码，分享给大家供大家参考，具体内容如下 效果图： 具体代码： 使用jquery-1.8.3.min.js，waterfall.js代码如下： $( window ).load( function(e){ ...
jq实现瀑布流
01-19
jQuery是一个广泛使用的JavaScript库，它简化了JavaScript的DOM操作，使得实现瀑布流布局变得更加便捷。 首先，我们要理解jQuery是如何工作的。jQuery的核心在于选择器（Selectors）、遍历（Traversing）和操作...
jquery实现超简单的瀑布流布局【推荐】
12-10
1.看看效果吧！ 2.html代码index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>... img{width:
JQ瀑布流加载
12-14
总的来说，JQ瀑布流加载涉及到的技术点包括：jQuery的DOM操作、AJAX请求、JSON数据解析、滚动事件监听以及瀑布流布局算法的实现。通过这些技术的组合，我们可以在网页上实现流畅且美观的瀑布流加载效果，提高用户...
【前端】用jQuery实现瀑布流效果
weixin_30307921的博客
07-12 212
jQuery实现瀑布流效果 何为瀑布流： 　　瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。 瀑布流的应用： 　　瀑布流对于图片的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式...
jQuery实现响应式瀑布流效果（jQuery+flex）
觉醒法师的专栏
05-29 2810
瀑布流原理：是一种常见的网页布局方式，它的特点是将内容以多列的形式呈现，每一列的内容高度不固定，根据内容的大小自适应调整，从而形成了像瀑布一样的流动效果。瀑布流的实现原理涉及到数据加载、布局设计、图片加载和响应式设计等方面，需要综合考虑各个方面的因素，以实现高效、流畅、美观的瀑布流效果。目前网上很多技术博文是使用定位完成瀑布流效果的，这里将使用jquery和flex布局来实现响应式瀑布流效果。
jQuery实现瀑布流
Month的博客
12-18 268
这几天做比赛项目的时候要写一个表白墙，用了瀑布流的方式实现，现在来说一下这个瀑布流是怎么实现的。 瀑布流是什么就不再说了，不知道的可以看看这个：点击打开链接 现在说说瀑布流的原理： 先计算一行最多容纳几个div 而后将第一行摆满div，将他们的高度存入数组 找出第一行中高度最小的div，第二行中的div距离顶部的距离就是该高度+留白，而后更新数组 这样就基本实现瀑布流了 代码： ht
jQuery实现动态瀑布流布局效果
陈春春的技术博客
02-02 1871
0x01 前言今天在tumblr上看到其瀑布流布局，如下图，觉得很有意思便研究了下，发现tumblr使用position:absolute布局的。照我之前的想法呢，是根据窗口大小，建立N条Col，然后依次将item append到col中。这样成本会小很多，因为只需要写好col的css即可：float:left或display:inline-block。0x02 代码编写HTML，CSS结构很简单，
用jQuery完成瀑布流布局
yongxiqianduan的博客
04-07 470
页面的瀑布流布局。使用jQuery框架，用HTML、CSS、JS、AJAX、DOM等共同配合完成。
jquery实现瀑布流
qq_35146837的博客
01-20 258
jquery实现瀑布流
jQuery瀑布流（一看就懂）
weixin_60659070的博客
10-11 2401
瀑布流可以使用JavaScript实现，今天我把使用jQuery方法实现瀑布流分享出来，供大家参考。 什么是瀑布流？ 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 准备工作： 工具：Visual Studio Code HTMl页面（waterfall.html文件） css文件（waterfall.css文件） js文件（waterfall.js文件） ...
JQuery实现照片瀑布流
POSTBIRD
01-10 3408
JQuery实现照片瀑布流 摘要：总所周知，百度搜图结果下拉会越来越多自动呈现，成为瀑布流。想要打造类似百度图片搜索的瀑布流不是困难的事情，通过javascript也能实现只是实现的比较麻烦，通过jquery实现50+行代码即可。而且相比百度的样式，更加自由化！ 废话不多说，先上图：下图最终的效果图，比较丑，是因为图片我没有经过处理，随便找的图片。【照片特点】宽度全部相同，高度不相同。 （注：
jq 实现 瀑布流
最新发布
06-02
要使用jq实现瀑布流，可以按照以下步骤进行操作： 1. 首先，定义一些CSS样式，包括每个瀑布流块的宽度、高度、边距等。 2. 使用jQuery选择器选中瀑布流容器，并使用方法如下： ```javascript var $container = $('#container'); ``` 3. 使用jQuery的ajax方法来获取数据，并在成功回调函数中将数据添加到瀑布流容器中。可以使用方法如下： ```javascript $.ajax({ url: 'data.json', dataType: 'json', success: function(data) { $.each(data, function(index, value) { var $box = $('<div>').addClass('box').appendTo($container); var $img = $('<img>').attr('src', value.url).appendTo($box); }); } }); ``` 4. 当所有图片加载完成后，使用jQuery的masonry插件来实现瀑布流布局，可以使用方法如下： ```javascript $container.imagesLoaded(function() { $container.masonry({ itemSelector: '.box', isAnimated: true }); }); ``` 通过以上步骤，就可以使用jq实现瀑布流了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值