风行一时瀑布流网页布局，实现无限加载（jquery）

今天跟大家分享一个瀑布流网页布局,先跟大家分析下实现的思路吧

主要思路：一、根据屏幕宽度和单个浮动层的宽度来确定浮动层列数

　　　　　　　　

var $boxs = $("#main>div")

        var boxw = $boxs.eq(0).outerWidth();

        var clos = Math.floor($(window).width()/boxw);

        $("#main").width(boxw*clos).css('margin','0 auto');

　　　　　二、用绝对定位来确定浮动层的位置，在这里我的浮动层里放一个图片来展示效果

　　　　　　

var hArr=[];

        $boxs.each(function(index, element) {

            var h=$boxs.eq(index).outerHeight();

            if(index<clos){

                hArr[index]=h;

                }

                else{

                    var minH=Math.min.apply(null,hArr);

                    var minHindex=$.inArray(minH,hArr);

                    $(element).css({

                        'position':'absolute',

                        'top':minH+'px',

                        'left':minHindex*boxw+'px'

                        })

                        hArr[minHindex]+=$boxs.eq(index).outerHeight();

                    }

　　　　　　三、根据屏幕显示高度+滚动条高度和最后一个浮动层的top值来确定执行滚动事件

　　　　　　　　

$(window).scroll(function(){

    

        if(checkscroll){

            for(var i=1;i<8;i++){

                var obox=$("<div>").addClass("box").appendTo($("#main"));

                var opic=$("<div>").addClass("pic").appendTo($(obox));

                $("<img>").attr('src','images/'+ i +".jpg").appendTo($(opic));

                }

        

                waterfall();

            }

        }) 

        function checkscroll(){

            

            var lasttop=$("#main>div").last().offset().top+=Math.floor($("#main>div").last().outerHeight()/2);

            var scrolltop= $(window).scrollTop();

            var documeth= $(window).height();

            return(lasttop>scrolltop+documeth)?true:false;

            }

　　　　例子请点击这里  例子（多刷新下页面看完整效果）