jquery实现瀑布流布局+无限下拉加载

来源：互联网发布：自学程序员要看什么书编辑：程序博客网时间：2024/05/22 04:51
每一步代码都有详细的注释，思路如下图所示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>        *{            margin: 0px;            padding: 0px;        }        #contianer{            position: relative;             font-size: 0;            margin: 0 auto;        }        .box{            padding: 5px;            float: left;            box-sizing: border-box;        }        .boximg{            padding: 5px;            box-shadow: 0 0 5px #ccc;            border: 1px solid #cccccc;            border-radius: 5px;        }        .boximg img{            width: 250px;            height: auto;        }</style></head><body><div id="container">    <div class="box">        <div class="boximg">            <img src="images/1.jpg">        </div>    </div>    <div class="box">        <div class="boximg">            <img src="images/2.jpg">        </div>    </div>    <div class="box">        <div class="boximg">            <img src="images/3.jpg">        </div>    </div>    <div class="box">        <div class="boximg">            <img src="images/4.jpg">        </div>    </div>    <div class="box">        <div class="boximg">            <img src="images/5.jpg">        </div>    </div>    <div class="box">        <div class="boximg">            <img src="images/6.jpg">        </div>    </div>    <div class="box">        <div class="boximg">            <img src="images/7.jpg">        </div>    </div>    <div class="box">        <div class="boximg">            <img src="images/8.jpg">        </div>    </div>    <div class="box">        <div class="boximg">            <img src="images/9.jpg">        </div>    </div>    <div class="box">        <div class="boximg">            <img src="images/10.jpg">        </div>    </div>    <div class="box">        <div class="boximg">            <img src="images/11.jpg">        </div>    </div>    <div class="box">        <div class="boximg">            <img src="images/12.jpg">        </div>    </div>    <div class="box">        <div class="boximg">            <img src="images/1.jpg">        </div>    </div>    <div class="box">        <div class="boximg">            <img src="images/2.jpg">        </div>    </div>    <div class="box">        <div class="boximg">            <img src="images/3.jpg">        </div>    </div>    <div class="box">        <div class="boximg">            <img src="images/4.jpg">        </div>    </div>    <div class="box">        <div class="boximg">            <img src="images/5.jpg">        </div>    </div></div></body><script src="js/jquery.js"></script><script>//思路如下：    $(function(){       var imgWidth=$(".box").innerWidth(); //获得每个div的宽度，包括内边距       var screenWidth=$(window).width();  //获得浏览器可视区域的宽度       var num=Math.floor(screenWidth/imgWidth);  //计算一行可以放几个div       $("#container").css({"width":num*imgWidth+"px","margin":"0 auto"}); //根据每行放的div的总长来给容器一个宽度，然后居中显示       function waterFlow(){          var arr=[]; //定义一个数组          for(var i=0;i<$(".box").length;i++){            if(i<num){             //一行显示num个div,将第一行的每个div高度写入数组                arr[i]=$(".box").eq(i).innerHeight();            }else{                var minImgHeight=Math.min.apply(null,arr);  //取得数组中最小高度的div                var index=getMinIndex(arr,minImgHeight);    //取得数组中最小高度的div的索引                $(".box").eq(i).css({"position":"absolute","top":minImgHeight+"px","left":$(".box").eq(index).offset().left+"px"}); //瀑布流布局                arr[index]+=$(".box").eq(i).innerHeight();  //将布局好的该div的高度和该div上面的div高度相加，重新放入数组            }          }       }       function getMinIndex(arr,min){       //取得数组中最小高度的div的索引           for(var i in arr){            if(arr[i]==min){                return i;            }           }       }        function checkScrollDirector(){      //判断滚动条是否滑到底部            var flag=0;            if($(document).scrollTop()+$(window).height()>=$(document).height()){                flag=1;            }               return flag;                 }        console.log($(document).height())        console.log($(window).height())       window.onload=function(){        waterFlow();     //图片加载完毕执行        var json={"data":[                 {"src":"images/1.jpg"},{"src":"images/2.jpg"},{"src":"images/3.jpg"},{"src":"images/4.jpg"},{"src":"images/5.jpg"},                 {"src":"images/6.jpg"},{"src":"images/7.jpg"},{"src":"images/8.jpg"},{"src":"images/9.jpg"},{"src":"images/10.jpg"},                 {"src":"images/11.jpg"},{"src":"images/12.jpg"}]};        window.onscroll=function(){           //滚动条滚动执行            if(checkScrollDirector()){                for(var i=0;i<json.data.length;i++){                    var html="<div class='box'><div class='boximg'><img src="+json.data[i].src+"></div></div>";                    $("#container").append(html);                       //向容器内一次性添加12个图片                    console.log(1);                }                waterFlow();                                            //瀑布流布局            }        }       }        })</script></html>
0 0