jQuery+css实现瀑布流布局(无限加载)

- 日理万妓 2023-07-12 14:44 144阅读 0赞

## 文件目录： ##

![在这里插入图片描述][20200309130740816.png]

## images： ##

这个文件夹放了需要的照片，名字都按照0，1,2，3…排列，便于取的时候好取，我放了23张，当然实际应用肯定是Ajax请求来的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]

## Html： ##

最外层`#main`这个容器就是放整个瀑布流的盒子，里面`.pin`是每个商品详情盒子，`.box`是每张商品图片的盒子，里面放上商品图片

## css： ##

## js： ##

首先放入jQuery源文件，去官网下载就好了，然后就是实现瀑布流的逻辑，注释已经写得很清楚了：

$( window ).on( "load", function(){
        waterfall('main','pin');
        var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]}; // 实际开发中这个数据从后台获取
        window.onscroll=function(){   // 滚动条事件
            if(checkscrollside()){
                $.each( dataInt.data, function( index, value ){
                    var $oPin = $('<div>').addClass('pin').appendTo( $( "#main" ) );
                    var $oBox = $('<div>').addClass('box').appendTo( $oPin );
                    $('<img>').attr('src','./images/' + $( value).attr( 'src') ).appendTo($oBox);
                });
                waterfall();   // 滚动加载的时候要执行这个函数，否则后面动态渲染的商品都没有样式
            };
        }
    });
    
    /*
        parent 父级id
        pin 元素id
    */
    function waterfall(parent,pin){
        var $aPin = $( "#main>div" );
        var iPinW = $aPin.eq( 0 ).width();// 一个块框pin的宽
        var num = Math.floor( $( window ).width() / iPinW );//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
        //oParent.style.cssText='width:'+iPinW*num+'px;ma rgin:0 auto;';//设置父级居中样式：定宽+自动水平外边距
        $( "#main" ).css({
            'width:' : iPinW * num,
            'margin': '0 auto'
        });
    
        var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
    
        $aPin.each( function( index, value ){
            var pinH = $aPin.eq( index ).height();
            if( index < num ){
                pinHArr[ index ] = pinH; //第一行中的num个块框pin 先添加进数组pinHArr
            }else{
                var minH = Math.min.apply( null, pinHArr );//数组pinHArr中的最小值minH
                var minHIndex = $.inArray( minH, pinHArr );//数组中这个最小值的index索引
                $( value ).css({
                    'position': 'absolute',
                    'top': minH + 15,    // 加上15是padding
                    'left': $aPin.eq( minHIndex ).position().left
                });
                //数组 最小高元素的高 + 添加上的aPin[i]块框高
                pinHArr[ minHIndex ] += $aPin.eq( index ).height() + 15;//更新添加了块框后的列高
            }
        });
    }
    
    function checkscrollside(){
        var $aPin = $( "#main>div" );
        var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height()/2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
        var scrollTop = $( window ).scrollTop()//注意解决兼容性
        var documentH = $( document ).width();//页面高度
        return (lastPinH < scrollTop + documentH ) ? true : false;//到达指定高度后 返回true，触发waterfall()函数
    }

[20200309130740816.png]: https://img-blog.csdnimg.cn/20200309130740816.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200309131218888.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70