代理加盟 2019全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: 秀站網 > 站長學院 > 建站教程 >

網頁模板實現瀑布流效果代碼

來源:未知 發布時間:2019-03-30熱度:我要評論
對于WEB前端工程師來說,把網站擁有更好的用戶體驗度,能讓用戶停留時間,增加PV。現在的網頁設計更大氣、新穎,就如本站的圖片瀏覽模式,其實就是經典的瀑布流布局,利用的是循環調用后絕對定位的方法,把代碼貼出來給大家分享 HTML部分 p id=pbl ul {dede:list pages...

織夢模板免費下載,無需注冊無需充值

網頁設計瀑布流效果js代碼

       對于WEB前端工程師來說,把網站擁有更好的用戶體驗度,能讓用戶停留時間,增加PV。現在的網頁設計更大氣、新穎,就如本站的圖片瀏覽模式,其實就是經典的瀑布流布局,利用的是循環調用后絕對定位的方法,把代碼貼出來給大家分享

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; //余數是0-第一排  余數1- 第二排  余數2-第三排 余數3- 第四排
switch(inew){
case 0 :  //0-第一排 
obj.eq(i).css({left:"0px"});
ImgHeight.line1.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.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;}

       這樣的實現方法比較簡單,但是不能做到自適應。本站的是根據用戶使用的平臺PC或者移動端屏幕尺寸而做相應的自適應CSS樣式。最優自適應的瀑布流下載鏈接:http://pan.baidu.com/s/1nusgaZR 密碼:t44g

自適應瀑布流網頁效果下載

本文地址:http://www.yxrxyy.live/news/1437.html

責任編輯:秀站網

    發表評論

    評論列表(條)

      北京28是什么彩票