對(duì)于WEB前端工程師來說，把網(wǎng)站擁有更好的用戶體驗(yàn)度，能讓用戶停留時(shí)間，增加PV�，F(xiàn)在的網(wǎng)頁設(shè)計(jì)更大氣、新穎，就如本站的圖片瀏覽模式，其實(shí)就是經(jīng)典的瀑布流布局，利用的是循環(huán)調(diào)用后絕對(duì)定位的方法，把代碼貼出來給大家分享

HTML部分

    <p id="pbl">
     <ul>
      {dede:list pagesize='18' titlen='20'}
      <li>
       <p class="pblcon">
        <a title="[field:title/]"href="[field:arcurl/]">
         <img src='[field:litpic/]' alt='[field:title/]'/>
         <p class="bj"></p>
         <p>[field:title/]</p>
        </a>
       </p>
      </li>
      {/dede:list}
     </ul>
    </p>
    <p class="pages">
     <ul>
      {dede:pagelist listitem='info,index,end,pre,next,pageno' listsize='5'/}
      <p class="clear"></p>
     </ul>
    </p>
   </p>
  <!--end-->
 </p>
<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery.js"></script>
<script type="text/javascript">
$(window).load(function(){
var len=$("#pbl ul li").length;
var obj=$("#pbl ul li");
var i=0;
var ImgHeight={line1:[],line2:[],line3:[],line4:[]};
for(i=0;i<len;i++){
var inew=i%4; //余數(shù)是0-第一排  余數(shù)1- 第二排  余數(shù)2-第三排 余數(shù)3- 第四排
switch(inew){
case 0 :  //0-第一排 
obj.eq(i).css({left:"0px"});
ImgHeight.line1.push(obj.eq(i).height()); //把高度保存到數(shù)級(jí)里
var step=Math.floor(i/4);
if(step==0){
obj.eq(i).css({top:"0px"});
}else{
var j=0;
var num=0;
for(j=0;j<step;j++){
num=num+ImgHeight.line1[j]+10;
}
obj.eq(i).css({top:num});
}
break;
case 1 : //1-第二排 
$("#pbl ul li").eq(i).css({left:"270px"});
ImgHeight.line2.push(obj.eq(i).height());
var step=Math.floor(i/4);
if(step==0){
obj.eq(i).css({top:"0px"});
}else{
var j=0;
var num=0;
for(j=0;j<step;j++){
num=num+ImgHeight.line2[j]+10;
}
obj.eq(i).css({top:num});
}
break;
case 2 : //2-第三排 
$("#pbl ul li").eq(i).css({left:"540px"});
ImgHeight.line3.push(obj.eq(i).height());
var step=Math.floor(i/4);
if(step==0){
obj.eq(i).css({top:"0px"});
}else{
var j=0;
var num=0;
for(j=0;j<step;j++){
num=num+ImgHeight.line3[j]+10;
}
obj.eq(i).css({top:num});
}
break;
case 3 : //3-第四排 
$("#pbl ul li").eq(i).css({left:"810px"});
ImgHeight.line4.push(obj.eq(i).height());
var step=Math.floor(i/4);
if(step==0){
obj.eq(i).css({top:"0px"});
}else{
var j=0;
var num=0;
for(j=0;j<step;j++){
num=num+ImgHeight.line4[j]+10;
}
obj.eq(i).css({top:num});
}
break;
}
}
});
</script>

樣式部分

/*瀑布流樣式*/
#pbl{width:auto;height:1180px;margin:0 auto;position:relative}
#pbl ul li{position:absolute}
.pblcon{position:relative;}
.pblcon a{display:block;color:#fff}
.pblcon img{width:260px;height:auto}
.pblcon p{position:absolute;bottom:0;left:0;width:100%;height:26px;font-size:14px;line-height:26px;}
.pblcon .bj{position:absolute;bottom:0;left:0;width:100%;height:26px;background:#000;opacity: .5;filter: alpha(opacity=50);-moz-opacity: .5;-khtml-opacity: .5;}

       這樣的實(shí)現(xiàn)方法比較簡(jiǎn)單，但是不能做到自適應(yīng)。本站的是根據(jù)用戶使用的平臺(tái)PC或者移動(dòng)端屏幕尺寸而做相應(yīng)的自適應(yīng)CSS樣式。最優(yōu)自適應(yīng)的瀑布流下載鏈接：http://pan.baidu.com/s/1nusgaZR 密碼：t44g