仿照著做了一下，但是為什么會是這樣的效果？
<!Doctype>
<html>
?<head>
? ?<title>瀑布流布局</title>
? ?<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
? ?<script type="text/javascript" src="jquery-1.8.3.min.js"/></script>
? ?<script type="text/javascript">
? ? ? $(window).on("load",function(){
? ? ? ? waterfall();
? ? ? });
? ? ? function waterfall(){
? ? ? ? ? var $box=$('#main>div');
? ? ? ? ? var $boxW=$box.eq(0).outerWidth();
? ? ? ? ? var num=Math.floor($(window).width()/$boxW);
? ? ? ? ? $('#main').width($boxW*num).css('margin','0 auto');
? ? ? ? ? var boxHArr=[];
? ? ? ? ? $box.each(function( index, value){
? ? ? ? ? ? var boxH=$box.eq(index).outerHeight();
? ? ? ? ? ? if(index<num){
? ? ? ? ? ? ? boxHArr[index]=boxH;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? var minH=Math.min.apply(null,boxHArr);
? ? ? ? ? ? ? var minIndex=$.inArray(minH,boxHArr);
? ? ? ? ? ? ? $(value).css({
? ? ? ? ? ? ? ? 'positon':'absolute',
? ? ? ? ? ? ? ? 'top':minH+'px',
? ? ? ? ? ? ? ? 'left':minIndex*$boxW+'px'
? ? ? ? ? ? ? });
? ? ? ? ? ? ? boxHArr[minIndex]+=$box.eq(index).outerHeight();
? ? ? ? ? ? }
? ? ? ? ? });
? ? ? ? ? ? ? ? ??
? ? ? ? }
? ? </script>
? ?<style type="text/css">
? ?*{
? ? ? ?margin: 0;
? ? ? ?padding: 0;
? ? ? ?}
? ??
? ? #main{
? ? ? ? padding-top:10px;
? ? ? ? position:relative;
? ? }
? ? .box{
? ? ? ? padding:15px 0 0 15px;
? ? ? ? float: left;
? ? }
? ? .pic{
? ? ? ? padding: 10px;
? ? ? ? box-shadow: 0 0 6px #ccc;
? ? ? ? border: 1px solid #ccc;
? ? ? ? border-radius: 5px;
? ? }
? ? .pic img{
? ? ? ? width: 162px;
? ? ? ? height: auto;
? ? }
? ?</style>
?</head>
?<body>
? ? ?<div id="main">
? ? ? <div class="box">
? <div class="pic">
? <img src="images/0.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/1.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/2.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/3.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/4.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/5.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/6.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/7.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/8.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/9.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/10.jpg" />
? </div>
? </div>
? ? <div class="box">
? ? ? <div class="pic">
? ? ? ? <img src="images/0.jpg" />
? ? ? </div>
? ? </div>
? ? <div class="box">
? ? ? <div class="pic">
? ? ? ? <img src="images/1.jpg" />
? ? ? </div>
? ? </div>
? ? <div class="box">
? ? ? <div class="pic">
? ? ? ? <img src="images/2.jpg" />
? ? ? </div>
? ? </div>
? ? <div class="box">
? ? ? <div class="pic">
? ? ? ? <img src="images/3.jpg" />
? ? ? </div>
? ? </div>
? ? ? <div class="box">
? ? ? <div class="pic">
? ? ? ? <img src="images/4.jpg" />
? ? ? </div>
? ? </div>
? ? ? <div class="box">
? ? ? <div class="pic">
? ? ? ? <img src="images/5.jpg" />
? ? ? </div>
? ? </div>
? ? ? <div class="box">
? ? ? <div class="pic">
? ? ? ? <img src="images/6.jpg" />
? ? ? </div>
? ? </div>
? ? <div class="box">
? ? ? <div class="pic">
? ? ? ? <img src="images/7.jpg" />
? ? ? </div>
? ? </div>
? ? <div class="box">
? ? ? <div class="pic">
? ? ? ? <img src="images/8.jpg" />
? ? ? </div>
? ? </div>
? ? <div class="box">
? ? ? <div class="pic">
? ? ? ? <img src="images/9.jpg" />
? ? ? </div>
? ? </div>
? ? ? <div class="box">
? ? ? <div class="pic">
? ? ? ? <img src="images/10.jpg" />
? ? ? </div>
? ? </div>
</div>
?</body>
</html>
2015-12-22
代碼打錯了?? 'position':'absolute',
2015-11-14
要對cols計算啊
2015-11-01
看下控制臺報錯信息是什么