后面几张图仍然叠在一起

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流-云南十八怪</title>

    <link rel="stylesheet" type="text/css" href="css/float.css">
  <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>  
   <script type="text/javascript"  src="js/float.js"></script>
     
   
   
</head>
<body>
<div id="wrap">
<div>
        <img src="images/1.png">
        <a href="http://www.imooc.com" target="_blank">第一怪 竹筒当烟袋</a>
    </div>
    <div>
        <img src="images/2.png">
        <a href="http://www.imooc.com" target="_blank">第二怪 草帽当锅盖</a>
    </div>
    <div>
        <img src="images/3.png">
        <a href="http://www.imooc.com" target="_blank">第三怪 这边下雨那边晒</a>
    </div>
    <div>
        <img src="images/4.png">
        <a href="http://www.imooc.com" target="_blank">第四怪 四季服装同穿戴</a>
    </div>
    <div>
        <img src="images/5.png">
        <a href="http://www.imooc.com" target="_blank">第五怪 火车没有汽车快</a>
    </div>
    <div>
        <img src="images/6.png">
        <a href="http://www.imooc.com" target="_blank">第六怪 火车不通国内通国外</a>
    </div>
    <div>
        <img src="images/7.png">
        <a href="http://www.imooc.com" target="_blank">第七怪 老奶爬山比猴快</a>
    </div>
    <div>
        <img src="images/8.png">
        <a href="http://www.imooc.com" target="_blank">第八怪 鞋子后面多一块</a>
    </div>
    <div>
        <img src="images/9.png">
        <a href="http://www.imooc.com" target="_blank">第九怪 脚趾四季露在外</a>
    </div>
    <div>
        <img src="images/10.png">
        <a href="http://www.imooc.com" target="_blank">第十怪 鸡蛋拴着卖</a>
    </div>
    <div>
        <img src="images/11.png">
        <a href="http://www.imooc.com" target="_blank">第十一怪 粑粑叫饵块</a>
    </div>
    <div>
        <img src="images/12.png">
        <a href="http://www.imooc.com" target="_blank">第十二怪 花生蚕豆数着卖</a>
    </div>
    <div>
        <img src="images/13.png">
        <a href="http://www.imooc.com" target="_blank">第十三怪 三个蚊子一盘菜</a>
    </div>
    <div>
        <img src="images/14.png">
        <a href="http://www.imooc.com" target="_blank">第十四怪 四个老鼠一麻袋</a>
    </div>
    <div>
        <img src="images/15.png">
        <a href="http://www.imooc.com" target="_blank">第十五怪 树上松毛扭着卖</a>
    </div>
    <div>
        <img src="images/16.png">
        <a href="http://www.imooc.com" target="_blank">第十六怪 姑娘叫老太</a>
    </div>
    <div>
        <img src="images/17.png">
        <a href="http://www.imooc.com" target="_blank">第十七怪 小和尚可以谈恋爱</a>
    </div>
    <div>
        <img src="images/18.png">
        <a href="http://www.imooc.com" target="_blank">第十八怪 背着娃娃谈恋爱</a>
    </div>
</div>
  
     

</body>
</html>

------------------------------------------------
*{
	margin: 0;
	padding: 0;
	border: none;
}
body{
	background: #ddd;
}
img{
	border: none;
}
a{
	text-decoration: none;
	color: #444;
}
a:hover{
	color: #999;
}

/*wrap*/
#wrap{
	position: relative;
	width: auto;
	height: auto;
	margin: 0 auto;
	/*居中*/

}

#wrap div{
	float: left;
	width: 200px;
	height: auto;
	box-sizing:border-box;
	margin: 10px;
	padding: 10px;
	border-radius: 5px;
	background: #fff;
}

#wrap div img{
	width: 100%;
}

#wrap div a{
	display: block;
	font-size: 18px;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
}
-----------------------------------+

var waterfall=function(wrap,boxes){
  // 获取屏幕可以显示的列数
  var boxWidth=boxes.eq(0).width()+40;
  var  windowWidth=$(window).width();
  var colsNumber=Math.floor(windowWidth/boxWidth);

  // 设置容器宽度
  wrap.width(boxWidth*colsNumber);


  var everyHeight=new Array();
  for (var i = 0; i < boxes.length; i++) {
    if(i<colsNumber){
      everyHeight[i]=  boxes.eq(i).height()+40;
    }else{
      var minHeight=Math.min.apply(null,everyHeight);
      var minIndex=getIndex(minHeight,everyHeight);
      boxes.eq(i).css({
           'position':'absolute',
           'top':minHeight,
           'left':boxes.eq(minIndex).position().left,
           'opacity':'0'
      }).stop().animate({
           'opacity':'1'
      },1000)
      everyHeight[minIndex]+=boxes.eq(i).height()+40;

    }
  
  };
}

// 获取最小列的索引
function getIndex(minHeight,everyHeight){
  for(index in everyHeight ){
    if (everyHeight[index]==minHeight) {
          return index;
    };
  }
}


$(document).ready(function(){
  var wrap=$("#wrap");
  var boxes=$("#wrap").children("div");
  waterfall(wrap,boxes);
});

慕粉6557610 2017-11-21

源自：项目：JQ实现瀑布流 3-3 使用Jquery完成定位布局