jQuery实现瀑布流

Posted 2020-10-05 封寻丸子

jQuery实现瀑布流js分析：首先监听window事件获取图片加载的位置，调用图片加载位置的函数，然后以鼠标滑动的距离来加载图片

1.html布局：

 1 <div id="container">
 2             <div class="box">
 3                 <div class="content">
 4                     <img src="../img/1.jpg"> 
 5                 </div>
 6             </div>
 7             <div class="box">
 8                 <div class="content">
 9                     <img src="../img/9.jpg"> 
10                 </div>
11             </div>
12             <div class="box">
13                 <div class="content">
14                     <img src="../img/11.jpg"> 
15                 </div>
16             </div>
17             <div class="box">
18                 <div class="content">
19                     <img src="../img/12.jpg"> 
20                 </div>
21             </div>
22 <-- class为box可以多复制几个-->
23                         </div>

2.css样式：

1 <style>
2             *{padding:0;margin:0;}
3             .box{position:relative;float:left;/*position:absolute*/}
4             .content{padding:10px;border:1px solid #ccc;box-shadow: 0 0  5px #ccc;
5             border-radius: 5px;}
6             img{width:190px;height:auto;}
7         </style>

3.js代码（注释写的有点乱）

<script>
            $(function(){
                //监听window事件来获取图片加载的位置
                $(window).on("load",function(){
                    imgLoction();
                    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(‘box‘).appendTo( $( "#container" ) );
                            var $oBox = $(‘<div>‘).addClass(‘content‘).appendTo( $oPin );
                            $(‘<img>‘).attr(‘src‘,‘./img/‘ + $( value).attr( ‘src‘) ).appendTo($oBox);
                        });
                        imgLoction();
                    };
                }
                    
                })
            })
            function checkscrollside(){
                var $aPin = $( ".box" );
                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()函数
            }
            
            
            
            
            function imgLoction(){
                //首先创建一个盒子对象，对应的就是index文件当中的box元素
                var box=$(".box");
                //获取盒子的宽度==第一个盒子的宽度
                var boxwidth=box.eq(0).width();
                //获取盒子宽度后看一排能摆放多少个
                //一排的个数等于当前浏览器窗口的宽度除以每个盒子的宽度,注意除以得到的数是小数，要将其转化为整数
                var num=Math.floor($(window).width()/boxwidth);
                //定义一个数组来承载储存列中所有盒子的高度,然后获取一排盒子中高度最小的那个
                var boxArr=[];
                //遍历box之后获取每个盒子的高度
                box.each(function(index,value){//这里的value是盒子对象
                    //console.log(index);
                    //创建一个盒子的高度,用来获取每个盒子的高度
                    var boxheight=box.eq(index).height();
                    //然后 判断：储存第一排中每一个图片的高度，放在数组中储存它
                    if(index<num){
                        boxArr[index]=boxheight;
                        //console.log(boxheight);
                    }else{
                        //获取到高度之后，第二排开始摆放，首先获取到图片最小的一个高度
                        var minboxheight=Math.min.apply(null,boxArr);
                        //console.log(minboxheight);
                        //设置图片的位置，获取第一排中最小图片存放的位置
                        var boxminindex=$.inArray(minboxheight,boxArr);
                        //console.log(boxminindex);
                        //接下来通过位置进行摆放
                        //console.log(value);
                        //获取对象
                        $(value).css({
                            "position":"absolute",
                            "top":minboxheight,
                            "left":box.eq(boxminindex).position().left
                        })
                        //然后还要记一个图片摆放的高度
                        boxArr[boxminindex]+=box.eq(index).height();
                    }
                })
                
            }
        </script>