想做成以上效果的瀑布流，但是寫了之后變成下面這樣了- -圖片很多被覆蓋了，不會自動把寬度小的圖片往上面放，而且也不居中了，求大神們幫忙看看代碼指點一下小白T^T代碼部分<title>無標(biāo)題文檔</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
2016-01-11 14:58:39
