網頁結構說明:
<body>
<div id="header">...</div>
<div id="main">
<div id="left" class="fleft">...</div>
<div id="middle" class="fleft">
<div id="mtop">...</div>
<div id="mview"><!---->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box" style="position:absolute;top: ... ;left: ... ;"></div>
<div class="box" style="position:absolute;top: ... ;left: ... ;"></div>
<div class="box" style="position:absolute;top: ... ;left: ... ;"></div>
<div class="box" style="position:absolute;top: ... ;left: ... ;"></div>
<div class="box" style="position:absolute;top: ... ;left: ... ;"></div>
<div class="box" style="position:absolute;top: ... ;left: ... ;"></div>
......
.....
....
...
<div class="box" style="position:absolute;top: ... ;left: ... ;"></div>
</div>
</div>
<div id="right">...</div>
</div>
<div id="footer">...</div>
</body>
<!--
box的style由jquery添加的;
#main { width:960px;overflow: hidden; margin:0 auto;background:url(imgs/bg_content.png) repeat-y right; }
#middle {width: 560px;padding: 20px;position: relative;overflow: hidden;}
#mview {position: relative; overflow: hidden;}
.box {padding: 10px 0 0 10px;float: left;}
.fleft{float:left;}
-->
我想在mview裡面做一個局部的瀑布流效果,讓每個box瀑布一樣的布局。現在jquery也寫好了,mview卻只顯示的一小部分(就第一行的高度那麼高),其他的顯示不出來,我在網上查了查,沒有找到解決辦法。誠請達人指點指點。謝謝
瀑布流裡面的元素是absolute定位不占用空間的,所以你的mview對象只有默認的高度。。你需要在你的瀑布流計算完畢後,獲取最後一行的元素計算下這個元素的高度+top位置,重設下mview的高度才行