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

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({}))来保证图片加载完毕再运行代码