瀑布流问题

想做成以上效果的瀑布流，但是写了之后变成下面这样了- -

图片很多被覆盖了，不会自动把宽度小的图片往上面放，而且也不居中了，求大神们帮忙看看代码指点一下小白T^T

代码部分

<title>无标题文档</title>
</head>

<body>
<div id="main">
	<div class="box">
    	<div class="pic">
        	<img src="images/20151229 (1).jpg" />
        
        </div>
    </div>
	<div class="box">
    	<div class="pic">
        	<img src="images/20151229 (2).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (3).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (4).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (5).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (6).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (7).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (8).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (9).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (10).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (11).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (12).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (13).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (14).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (15).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (16).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (17).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (18).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (19).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (20).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (21).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (22).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (23).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (24).jpg" />
        
        </div>
    </div><div class="box">
    	<div class="pic">
        	<img src="images/20151229 (25).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (26).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (27).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (28).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (29).jpg" />
        
        </div>
    </div>
    <div class="box">
    	<div class="pic">
        	<img src="images/20151229 (30).jpg" />
        
        </div>
            </div>
</div>

#main{ position:relative;}
.box{ padding:10px 0 0 10px; float:left;}
.pic img{ width:auto; height:250px;}

<script>
$(window).on('load',function(){
	waterfall();
	var dataInt={"data":[{"src":"20151229 (1).jpg"},{"src":"20151229 (2).jpg"},{"src":"20151229 (4).jpg"}]};
	        $(window).on('scroll',function(){
            if(checkScrollSlide()){
                $.each(dataInt.data,function(key,value){
                    var oBox=$('<div>').addClass('box').appendTo($('#main'));
                    var oTu=$('<div>').addClass('tu').appendTo($(oBox));
                    var oImg=$('<img>').attr('src',$(value).attr('src')).appendTo($(oTu));
                })
                waterfall();
            }
        })

})

function waterfall(){
	    var $boxs=$('#main>div');
        var w=$boxs.eq(1).outerWidth();
        var cols=Math.floor($(window).width()/w);
        $('#main').width(w*cols).css('margin','0 auto');
        var hArr=[];
        $boxs.each(function(index,value){
            var h=$boxs.eq(index).outerHeight();
            if(index<cols){
                hArr[index]=h;
            }else{
                var minH=Math.min.apply(null,hArr);
                var minHIndex=$.inArray(minH,hArr);
                $(value).css({
                    'position':'absolute',
                    'top':minH+'px',
                    'left':minHIndex*h+'px'
                })
                hArr[minHIndex]+=$boxs.eq(index).outerHeight();
            }
        })
 
    }
    function checkScrollSlide(){
        var $lastBox=$('#main>div').last();
        var lastBoxDis=$lastBox.offset().top+$lastBox.outerHeight();
        var scrllTop=$(window).scrollTop();
        //if(contentH - viewH - scrollTop <= 100);
        var documentH=$(window).height();
        return (lastBoxDis<=scrllTop+documentH)?true:false;
    }


</script>

慕姐0693551

浏览 1683回答 1

1回答

泰伯

首先你要弄清楚，你这个图片显示出来是否有顺序之说，如果没有顺序的话，仅仅是随机展示你可以使用多种方式来实现1.通过计算显示的图片的宽度，相对于一行的宽度占的比例，然后循环往里填充2.也可以通过分组的方式，把图片分组，分组的规则：横向宽度要达到屏幕宽度，高度要达到一行的高度等。以上均是提出的思路，具体实现代码请自重

0 0

随时随地看视频慕课网APP