瀑布流布局，刷新有点问题。搞不懂 。。。

Question

 *{
    margin: 0;
    padding: 0;
}

#main{
    position: relative;
}
.box{
    float: left;
    padding: 5px;
}
.pic{
    padding: 7px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px #ccc;
    border-radius: 5px;
}
img{
    width: 195px;
}

<div id="main">
   <div class="box">
       <div class="pic">
           <img src="images/0.jpg" alt=""/>
       </div>
   </div>
   <div class="box">
       <div class="pic">
           <img src="images/1.jpg" alt=""/>
       </div>
   </div>
   <div class="box">
       <div class="pic">
           <img src="images/2.jpg" alt=""/>
       </div>
   </div>
   <div class="box">
       <div class="pic">
           <img src="images/3.jpg" alt=""/>
       </div>
   </div>
   <div class="box">
       <div class="pic">
           <img src="images/4.jpg" alt=""/>
       </div>
   </div>
   <div class="box">
       <div class="pic">
           <img src="images/5.jpg" alt=""/>
       </div>
   </div>
   <div class="box">
       <div class="pic">
           <img src="images/6.jpg" alt=""/>
       </div>
   </div>
   <div class="box">
       <div class="pic">
           <img src="images/7.jpg" alt=""/>
       </div>
   </div>
   <div class="box">
       <div class="pic">
           <img src="images/8.jpg" alt=""/>
       </div>
   </div>
   <div class="box">
       <div class="pic">
           <img src="images/9.jpg" alt=""/>
       </div>
   </div>
   <div class="box">
       <div class="pic">
           <img src="images/10.jpg" alt=""/>
       </div>
   </div>
   <div class="box">
       <div class="pic">
           <img src="images/11.jpg" alt=""/>
       </div>
   </div>
   <div class="box">
       <div class="pic">
           <img src="images/12.jpg" alt=""/>
       </div>
   </div>

</div>

$(function () {
    var $box = $(".box");
    var head = [];

    var allW = document.body.clientWidth || document.documentElement.clientWidth;
    var wid = $box.eq(0).outerWidth();
    var rol = Math.floor(allW/wid)


    $("#main").css({"width":wid*rol + "px",
                    "margin":"0 auto"});
    for(var i=0;i<$box.length;i++){
        if(i<rol){
            head[i] = $box.eq(i).outerHeight();
        }else{
            var minH = Math.min.apply(null,head);
            var index = $(head).index($(minH));
            $box.eq(i).css({"position":"absolute",
                            "top":minH+"px",
                            "left":$box.eq(index).offset().left+"px"});

            head[index]+=$box.eq(i).outerHeight();
        }

    }
})

Answer 1

是不是每次刷新页面结构偶尔会发生变化？原因出在$(function({}))这句话中，这句话的意思等待页面结构加载完毕，只是结构，并不包括图片；因此，当你刷新时，图片是未加载的；那为什么图片未加载时有时能按照代码排序，有时不能，因为jq的方法(outerHeight,outerWidth等)会尝试图片可见获取值再隐藏，这种尝试的可能性导致时好时坏；可以用$(window).load(function({}))来保证图片加载完毕再运行代码