                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /瀑布流布局

為什么我的圖片會重疊？打印出的最小高度min為什么會是55px?一臉懵逼

<!DOCTYPE html>
<html>
<head lang="en">
? ?<meta charset="UTF-8">
? ?<title>JQ實現(xiàn)瀑布流布局</title>
? ?<link rel="stylesheet" href="style.css">
? ?<script src="jquery.js"></script>
? ?<script src="JQscript.js"></script>
</head>
<body>
<div id="main">
? ?<div class="out">
? ? ? ?<div class="in">
? ? ? ? ? ?<img src="images/1.jpg"/>
? ? ? ?</div>
? ?</div>
? ?<div class="out">
? ? ? ?<div class="in">
? ? ? ? ? ?<img src="images/2.jpg"/>
? ? ? ?</div>
? ?</div>
? ?<div class="out">
? ? ? ?<div class="in">
? ? ? ? ? ?<img src="images/3.jpg"/>
? ? ? ?</div>
? ?</div>
? ?<div class="out">
? ? ? ?<div class="in">
? ? ? ? ? ?<img src="images/4.jpg"/>
? ? ? ?</div>
? ?</div>
? ?<div class="out">
? ? ? ?<div class="in">
? ? ? ? ? ?<img src="images/5.jpg"/>
? ? ? ?</div>
? ?</div>
? ?<div class="out">
? ? ? ?<div class="in">
? ? ? ? ? ?<img src="images/6.jpg"/>
? ? ? ?</div>
? ?</div>
? ?<div class="out">
? ? ? ?<div class="in">
? ? ? ? ? ?<img src="images/7.jpg"/>
? ? ? ?</div>
? ?</div>
? ?<div class="out">
? ? ? ?<div class="in">
? ? ? ? ? ?<img src="images/8.jpg"/>
? ? ? ?</div>
? ?</div>
? ?<div class="out">
? ? ? ?<div class="in">
? ? ? ? ? ?<img src="images/9.jpg"/>
? ? ? ?</div>
? ?</div>
? ?<div class="out">
? ? ? ?<div class="in">
? ? ? ? ? ?<img src="images/10.jpg"/>
? ? ? ?</div>
? ?</div>
? ?<div class="out">
? ? ? ?<div class="in">
? ? ? ? ? ?<img src="images/4.jpg"/>
? ? ? ?</div>
? ?</div>
? ?<div class="out">
? ? ? ?<div class="in">
? ? ? ? ? ?<img src="images/5.jpg"/>
? ? ? ?</div>
? ?</div>
? ?<div class="out">
? ? ? ?<div class="in">
? ? ? ? ? ?<img src="images/3.jpg"/>
? ? ? ?</div>
? ?</div>
? ?<div class="out">
? ? ? ?<div class="in">
? ? ? ? ? ?<img src="images/1.jpg"/>
? ? ? ?</div>
? ?</div>
? ?<div class="out">
? ? ? ?<div class="in">
? ? ? ? ? ?<img src="images/7.jpg"/>
? ? ? ?</div>
? ?</div>
? ?<div class="out">
? ? ? ?<div class="in">
? ? ? ? ? ?<img src="images/5.jpg"/>
? ? ? ?</div>
? ?</div>
? ?<div class="out">
? ? ? ?<div class="in">
? ? ? ? ? ?<img src="images/10.jpg"/>
? ? ? ?</div>
? ?</div>
? ?<div class="out">
? ? ? ?<div class="in">
? ? ? ? ? ?<img src="images/6.jpg"/>
? ? ? ?</div>
? ?</div>
? ?<div class="out">
? ? ? ?<div class="in">
? ? ? ? ? ?<img src="images/9.jpg"/>
? ? ? ?</div>
? ?</div>

</div>
</body>
</html>

$(function(){
? ?waterFall();
? ?//模擬得到的后臺數(shù)據(jù)
? ?var data = [{"src":"images/1.jpg"},{"src":"images/4.jpg"},{"src":"images/3.jpg"},{"src":"images/8.jpg"},{"src":"images/7.jpg"},{"src":"images/7.jpg"},{"src":"images/7.jpg"},{"src":"images/7.jpg"},{"src":"images/7.jpg"}]
? ?//如果達(dá)到了加載條件
? ?$(window).scroll(function(){
? ? ? ?if(ScrollOver()==true){ ? ? ??
? ? ? ? ? ?for(var i=0;i<data.length;i++)
? ? ? ? ? ?{
? ? ? ? ? ? ? ?var out =$('<div class="out"></div>');
? ? ? ? ? ? ? ?$("#main").append(out);

? ? ? ? ? ? ? ?var inn =$('<div class="in"></div>');
? ? ? ? ? ? ? ?out.append(inn);

? ? ? ? ? ? ? ?var img=$("<img />");
? ? ? ? ? ? ? ?img.attr("src",data[i].src);
? ? ? ? ? ? ? ?inn.append(img);
? ? ? ? ? ?}
? ? ? ? ? ?waterFall();
? ? ? ?}
? ?})
})

//主要函數(shù)
function waterFall(){
? ?var $Boxs = $("#main>div");
? ?var cols=Math.floor($(window).width()/$Boxs.eq(0).outerWidth());//瀏覽器視口,自適應(yīng)的列數(shù)
? ?$("#main").css({'width':cols*$Boxs.eq(0).outerWidth()+'px','margin':'0 auto'});//使整體居中
? ?var colHt=[];//存儲各列的總高度

? ?$Boxs.each(function(index,value){
? ? ? ?if(index<cols){
? ? ? ? ? ?colHt[index]=$Boxs.eq(index).outerHeight();
? ? ? ?}
? ? ? ?else{
? ? ? ? ? ?var min = Math.min.apply(null,colHt);
? ? ? ? ? ?console.log(min);
? ? ? ? ? ?var minIndex= $.inArray(min,colHt);
? ? ? ? ? ?$(value).css({'position':'absolute','top':min+'px','left':minIndex*$Boxs.eq(0).outerWidth()+'px'});

? ? ? ? ? ?//更新
? ? ? ? ? ?colHt[minIndex]+=$Boxs.eq(index).outerHeight();
? ? ? ?}
? ?})

}

//判斷是否達(dá)到加載圖片的要求
//滾動距離+視口高度>=offsetTop
function ScrollOver(){
? ?var oBoxes = $("#main>div")
? ?var scrollH=$(document).scrollTop();
? ?var H1=$(window).height()+scrollH;
? ?var H2=oBoxes.eq(oBoxes.length-1).outerHeight();
? ?return (H1 >= H2) ? true : false;
}