?*{
????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();
????????}
????}
})
瀑布流布局，刷新有點問題。搞不懂 。。。
OlderSkee
2016-09-18 18:04:32
