风行一时瀑布流网页布局，实现无限加载（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;
            }

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

优质内容筛选与推荐>>
1、W3CSchool闯关笔记(Bootstrap)
2、HDU 1712 ACboy needs your help AC男需要你的帮助（分组的背包）
3、create a simple COM object
4、Docker 删除容器日志
5、JS 观察者模式

0 │ 收藏 │ 举报

朋友将在看一看看到

分享想法到看一看